:root{--navy:#163A5F;--navy2:#0e2a45;--teal:#168C8C;--gold:#D8AD4A;--bg:#F5F7FA;--card:#fff;--text:#1F2937;--muted:#6B7280;--line:#E5E7EB;--danger:#B42318;--success:#18794E;--shadow:0 16px 40px rgba(22,58,95,.08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--text)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:linear-gradient(180deg,var(--navy2),var(--navy));color:#fff;padding:22px 16px;display:flex;flex-direction:column;z-index:30}.brand{display:flex;gap:12px;align-items:center;padding:0 8px 22px;border-bottom:1px solid rgba(255,255,255,.12)}.brand strong{display:block;letter-spacing:.04em}.brand small{display:block;color:#bcd1e4;margin-top:3px}.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--teal),#1fb8a6);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 10px 24px rgba(0,0,0,.18)}.brand-mark.large{width:64px;height:64px;font-size:22px}.brand-mark.xl{width:78px;height:78px;font-size:26px;border-radius:22px}.sidebar nav{padding:20px 0;display:grid;gap:7px}.nav-link{padding:11px 12px;border-radius:10px;color:#e8f0f8;font-weight:700;font-size:14px}.nav-link:hover{background:rgba(255,255,255,.1)}.sidebar-user{margin-top:auto;padding:16px 8px 0;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:4px}.sidebar-user small{text-transform:capitalize;color:#c8d6e5}.sidebar-user form{margin-top:10px}.main{margin-left:250px;min-height:100vh}.topbar{height:86px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 28px;gap:14px;position:sticky;top:0;z-index:20}.topbar h1{font-size:22px;margin:0}.topbar p{margin:4px 0 0;color:var(--muted);font-size:13px}.menu-btn{display:none;border:0;background:#eef3f8;border-radius:10px;padding:9px 12px;font-size:20px}.content{padding:26px;max-width:1600px;margin:auto}.panel{background:var(--card);border:1px solid #e8edf2;border-radius:18px;box-shadow:var(--shadow);padding:20px;margin-bottom:22px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.panel-head h2{margin:0;font-size:18px}.panel-head p{margin:5px 0 0;color:var(--muted);font-size:13px}.period-banner{background:linear-gradient(120deg,var(--navy),#245b86);color:#fff;border-radius:18px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;box-shadow:var(--shadow)}.period-banner span{display:block;font-size:12px;color:#d8e5f1;text-transform:uppercase;letter-spacing:.08em}.period-banner strong{display:block;margin-top:4px;font-size:18px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}.stat-card{background:#fff;border:1px solid #e9eef3;border-radius:18px;padding:20px;box-shadow:var(--shadow)}.stat-card span{color:var(--muted);font-size:13px}.stat-card strong{font-size:30px;display:block;margin:8px 0 4px;color:var(--navy)}.stat-card small{color:var(--muted)}.stat-card.accent{border-top:4px solid var(--gold)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #cad5df;background:#fff;color:var(--navy);border-radius:10px;padding:9px 13px;font-weight:800;font-size:13px;cursor:pointer}.btn:hover{filter:brightness(.98)}.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}.btn-secondary{background:var(--teal);border-color:var(--teal);color:#fff}.btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}.btn-sm{padding:6px 9px;font-size:12px}.btn-block{width:100%}.alert{padding:12px 14px;border-radius:10px;margin-bottom:18px;font-weight:700;font-size:14px}.alert-success{background:#E8F7F0;color:var(--success)}.alert-danger{background:#FDECEC;color:var(--danger)}.badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:#eef3f8;color:var(--navy);font-style:normal;font-size:11px;font-weight:800;margin-left:6px}.badge.success{background:#e8f7f0;color:var(--success)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.form-grid.compact{grid-template-columns:1.2fr 1fr 1fr .7fr auto;align-items:end}.span-2{grid-column:span 2}.stack-form{display:grid;gap:14px}.inline-form{display:flex;gap:10px;margin-bottom:14px}.align-end{align-self:end}label{display:grid;gap:6px;color:#4b5563;font-size:12px;font-weight:800}input,select,textarea{width:100%;border:1px solid #cfd9e2;background:#fff;border-radius:10px;padding:9px 10px;color:var(--text);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(22,140,140,.11)}textarea{resize:vertical}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.table-wrap.wide{max-width:100%}table{border-collapse:collapse;width:100%;min-width:720px;background:#fff}th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px;vertical-align:middle}thead th{background:#f2f6fa;color:#4b5563;font-size:11px;text-transform:uppercase;letter-spacing:.04em}tbody tr:hover{background:#fbfdff}.empty{text-align:center!important;color:var(--muted);padding:28px!important}.list-clean{display:grid}.list-clean>div{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}.class-card{border:1px solid #e2e8ee;border-radius:16px;padding:18px;background:linear-gradient(180deg,#fff,#f9fbfd)}.class-card span{color:var(--teal);font-size:12px;font-weight:900;text-transform:uppercase}.class-card h3{font-size:24px;margin:5px 0 18px;color:var(--navy)}.class-card div{display:flex;gap:7px;flex-wrap:wrap}.grade-table th small,.grade-table td small{display:block;color:var(--muted);margin-top:4px;font-weight:500}.score-input{width:72px;text-align:center;font-weight:800}.sticky-col{position:sticky;left:0;background:#fff;z-index:2;min-width:190px}.grade-table thead .sticky-col{background:#f2f6fa;z-index:3}.progress{width:140px;height:8px;border-radius:99px;background:#e8edf2;overflow:hidden;display:inline-block;margin-right:7px}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--teal),#31baa9)}.muted{color:var(--muted)}
.login-page{min-height:100vh;background:radial-gradient(circle at top left,#285e88,var(--navy2) 48%,#091e31);display:grid;place-items:center;padding:26px}.login-wrap{width:min(1000px,100%);display:grid;grid-template-columns:1.1fr .9fr;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.3)}.login-hero{background:linear-gradient(145deg,var(--navy),#0c304f);padding:58px;color:#fff;display:flex;flex-direction:column;justify-content:center}.login-hero .eyebrow{color:#82e0d7}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:900;color:var(--teal)}.login-hero h1{font-size:44px;line-height:1.05;margin:14px 0}.login-hero p{color:#cedfeb;line-height:1.7;max-width:470px}.hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.hero-tags span{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800}.login-card{padding:54px;display:flex;flex-direction:column;justify-content:center;gap:22px}.login-card h2{font-size:30px;margin:6px 0}.login-card p{color:var(--muted);margin:0}.center-page{min-height:100vh;display:grid;place-items:center;background:var(--bg)}.error-card{text-align:center;background:#fff;border-radius:22px;padding:40px;box-shadow:var(--shadow);max-width:500px}.error-card .brand-mark{margin:auto}.error-card p{color:var(--muted);margin-bottom:22px}
.report-page{background:#dfe4e9;padding:20px}.report-toolbar{max-width:216mm;margin:0 auto 12px;display:flex;justify-content:flex-end;gap:8px}.report-sheet{width:216mm;min-height:330mm;margin:auto;background:#fff;padding:13mm 12mm;box-shadow:0 10px 40px rgba(0,0,0,.16);color:#111}.report-header{display:grid;grid-template-columns:70px 1fr 70px;align-items:center;text-align:center;border-bottom:3px double #111;padding-bottom:10px}.report-header h1{font-size:20px;margin:3px 0}.report-header p{margin:2px}.arabic-title{font-family:"Times New Roman",serif;font-size:23px!important;direction:rtl}.report-logo{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:900;margin:auto}.report-logo.outline{background:#fff;color:var(--navy);border:3px solid var(--navy)}.identity-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;margin:14px 0}.identity-grid div{display:grid;grid-template-columns:130px 1fr;font-size:12px}.identity-grid span:after{content:" :"}.report-table{min-width:0;border:1px solid #111}.report-table th,.report-table td{border:1px solid #111;padding:6px;font-size:10px}.report-table thead th{text-align:center;background:#f4f4f4;color:#111}.report-table .score{text-align:center;font-size:12px;font-weight:800}.report-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:12px}.report-bottom-grid h3{font-size:12px;margin:0 0 5px}.mini-table{min-width:0;border:1px solid #111}.mini-table td,.mini-table th{border:1px solid #111;padding:5px;font-size:10px}.report-note{margin-top:12px;border:1px solid #111;padding:8px;font-size:10px;min-height:48px}.report-note span{font-weight:800}.report-note p{margin:5px 0 0}.promotion{display:flex;gap:12px;margin-top:8px;font-size:11px}.signatures{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center;font-size:10px;margin-top:20px}.sign-space{height:55px}
@page{size:216mm 330mm;margin:0}.print-mode{padding:0;background:#fff}.print-mode .report-sheet{box-shadow:none;margin:0}.no-print{display:flex}
@media print{.no-print{display:none!important}.report-page{background:#fff;padding:0}.report-sheet{box-shadow:none;margin:0;width:216mm;min-height:330mm;page-break-after:always}}
@media(max-width:1000px){.stats-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}.form-grid.compact{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}.login-hero{padding:40px}.login-card{padding:40px}}
@media(max-width:800px){.sidebar{transform:translateX(-102%);transition:.2s}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.menu-btn{display:block}.content{padding:16px}.topbar{padding:0 16px}.stats-grid{grid-template-columns:1fr 1fr}.period-banner{align-items:flex-start;gap:14px;flex-direction:column}.login-wrap{grid-template-columns:1fr}.login-hero{display:none}.login-card{min-height:560px}.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.form-grid.compact{grid-template-columns:1fr}.report-page{overflow:auto}.report-sheet{transform-origin:top left}.panel{padding:14px}}
@media(max-width:500px){.stats-grid{grid-template-columns:1fr}.login-page{padding:14px}.login-card{padding:28px}.topbar h1{font-size:18px}}


/* =========================================================
   RAPOR MADIN NURUL HIDAYAH
   PREMIUM UI V1
   ========================================================= */

:root{
  --premium-navy:#102f4d;
  --premium-navy-2:#0a2238;
  --premium-blue:#245f8d;
  --premium-teal:#159b95;
  --premium-teal-light:#2ac4b6;
  --premium-gold:#d8ad4a;
  --premium-surface:#f4f7fa;
}

/* LOGO */

.brand-logo{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(255,255,255,.18);
}

.brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.brand-logo span{
  font-weight:900;
  color:#fff;
}

.sidebar-logo{
  width:48px;
  height:48px;
  border-radius:15px;
  padding:3px;
  box-shadow:
    0 12px 28px rgba(0,0,0,.2),
    inset 0 0 0 1px rgba(255,255,255,.18);
}

.sidebar-logo span{
  color:var(--navy);
}

.premium-brand{
  padding:0 6px 22px;
  gap:13px;
}

.brand-copy strong{
  font-size:14px;
  letter-spacing:.07em;
}

.brand-copy small{
  font-size:12px;
}

/* SIDEBAR */

.premium-sidebar{
  background:
    radial-gradient(circle at 15% 4%,rgba(35,110,154,.35),transparent 27%),
    linear-gradient(180deg,#09253d 0%,#123f63 100%);
  box-shadow:12px 0 42px rgba(11,42,68,.12);
}

.premium-nav{
  gap:3px!important;
}

.nav-section{
  padding:19px 12px 7px;
  color:#7294ae;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.premium-nav .nav-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  border:1px solid transparent;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.premium-nav .nav-link:hover{
  background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.07);
  transform:translateX(2px);
}

.nav-icon{
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  color:#7de0d8;
  font-size:13px;
  font-weight:900;
}

.premium-sidebar-user{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px!important;
}

.sidebar-user-label{
  color:#6f98b6;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  margin-bottom:6px;
}

.sidebar-logout{
  width:100%;
}

/* MAIN + TOPBAR */

.main{
  display:flex;
  flex-direction:column;
}

.premium-content{
  flex:1;
  width:100%;
}

.premium-topbar{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(15,47,77,.04);
}

.topbar-copy{
  flex:1;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border:1px solid #e1e8ef;
  border-radius:999px;
  background:#f8fafc;
  color:#52677a;
  font-size:11px;
  font-weight:800;
}

.topbar-status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#27ae75;
  box-shadow:0 0 0 4px rgba(39,174,117,.11);
}

/* GLOBAL FOOTER */

.app-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:10px 24px 24px;
  color:#778697;
  font-size:11px;
}

.app-footer a,
.login-card-footer a{
  color:var(--teal);
  font-weight:900;
}

.footer-heart{
  color:#e84d64;
  display:inline-block;
  margin:0 2px;
}

.footer-separator,
.footer-dot{
  color:#c1cbd4;
}

/* LOGIN PREMIUM */

.premium-login{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 5%,#377ca7 0%,transparent 33%),
    radial-gradient(circle at 88% 95%,rgba(27,167,158,.18),transparent 30%),
    linear-gradient(135deg,#173f61 0%,#071c2e 68%,#061725 100%);
}

.login-shell{
  position:relative;
  z-index:3;
  width:min(1120px,100%);
}

.login-orb{
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  filter:blur(2px);
}

.orb-one{
  width:420px;
  height:420px;
  left:-180px;
  bottom:-170px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 0 0 55px rgba(255,255,255,.015),
    0 0 0 110px rgba(255,255,255,.01);
}

.orb-two{
  width:250px;
  height:250px;
  right:-90px;
  top:-80px;
  background:rgba(20,154,148,.06);
}

.premium-login-wrap{
  width:100%;
  grid-template-columns:1.08fr .92fr;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 38px 100px rgba(1,16,30,.44);
}

.premium-login-hero{
  position:relative;
  overflow:hidden;
  padding:56px 60px;
  background:
    linear-gradient(145deg,rgba(20,66,101,.96),rgba(8,42,69,.99));
}

.premium-login-hero:before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-170px;
  bottom:-165px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 45px rgba(255,255,255,.02),
    0 0 0 90px rgba(255,255,255,.015);
}

.login-hero-glow{
  position:absolute;
  width:280px;
  height:280px;
  right:-60px;
  top:-80px;
  border-radius:50%;
  background:rgba(31,184,166,.12);
  filter:blur(22px);
}

.login-brand-row{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:16px;
}

.login-logo{
  width:82px;
  height:82px;
  border-radius:22px;
  padding:5px;
  box-shadow:0 20px 44px rgba(0,0,0,.25);
}

.login-logo span{
  color:var(--navy);
  font-size:25px;
}

.login-brand-name{
  margin-top:5px;
  color:#fff;
  font-size:20px;
  font-weight:900;
}

.login-hero-copy{
  position:relative;
  z-index:2;
  margin-top:58px;
}

.premium-chip{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(125,224,216,.24);
  background:rgba(22,140,140,.16);
  color:#8ee8df;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.premium-login-hero h1{
  max-width:520px;
  margin:17px 0;
  font-size:48px;
  line-height:1.01;
  letter-spacing:-.035em;
}

.premium-login-hero h1 span{
  display:block;
  color:#a7ddd9;
  font-size:.8em;
  margin-top:7px;
}

.premium-login-hero p{
  max-width:530px;
  margin:0;
  color:#c8dae8;
  font-size:15px;
  line-height:1.75;
}

.premium-tags span{
  background:rgba(255,255,255,.065);
  border-color:rgba(255,255,255,.13);
}

.login-mini-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:30px;
}

.login-mini-stats div{
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.045);
}

.login-mini-stats strong{
  display:block;
  color:#fff;
  font-size:18px;
}

.login-mini-stats span{
  display:block;
  margin-top:2px;
  color:#9bb8ce;
  font-size:10px;
}

.premium-login-card{
  padding:56px;
  background:
    linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
}

.login-card-head h2{
  margin:8px 0;
  color:#132a42;
  font-size:32px;
  letter-spacing:-.025em;
}

.login-card-head p{
  line-height:1.6;
}

.login-form{
  gap:17px;
}

.input-premium-wrap{
  position:relative;
}

.input-premium-wrap input{
  height:48px;
  padding-left:44px;
  border-color:#d7e0e8;
  background:#fbfcfe;
}

.input-premium-icon{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  color:#7190a6;
  font-size:11px;
  font-weight:900;
  pointer-events:none;
}

.premium-login-btn{
  min-height:48px;
  margin-top:2px;
  border:0;
  background:
    linear-gradient(115deg,#123e63,#1a5a82);
  box-shadow:0 12px 24px rgba(18,62,99,.16);
}

.premium-login-btn:hover{
  transform:translateY(-1px);
}

.login-security{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#7a8794;
  font-size:10px;
}

.security-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#2fb17d;
  box-shadow:0 0 0 4px rgba(47,177,125,.1);
}

.login-card-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  padding-top:18px;
  border-top:1px solid #edf0f3;
  color:#8793a0;
  font-size:10px;
}

.login-page-footer{
  padding:14px 0 0;
  text-align:center;
  color:rgba(255,255,255,.48);
  font-size:10px;
}

.login-mobile-brand{
  display:none;
}

/* DASHBOARD WELCOME */

.dashboard-welcome{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-bottom:22px;
  padding:23px 25px;
  border-radius:22px;
  color:#fff;
  background:
    radial-gradient(circle at 88% 20%,rgba(55,184,174,.25),transparent 27%),
    linear-gradient(120deg,#123b5e 0%,#245f87 100%);
  box-shadow:0 20px 45px rgba(15,54,84,.14);
}

.dashboard-welcome:after{
  content:"";
  position:absolute;
  width:210px;
  height:210px;
  right:-70px;
  bottom:-115px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 0 0 38px rgba(255,255,255,.025),
    0 0 0 76px rgba(255,255,255,.018);
}

.dashboard-welcome-left{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:17px;
}

.dashboard-logo-badge{
  display:grid;
  place-items:center;
  width:74px;
  height:74px;
  flex:0 0 74px;
  padding:5px;
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  box-shadow:0 14px 32px rgba(0,0,0,.18);
}

.dashboard-logo-badge img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.dashboard-logo-badge span{
  color:var(--navy);
  font-weight:900;
  font-size:22px;
}

.dashboard-eyebrow{
  color:#7ee0d7;
}

.dashboard-welcome h2{
  margin:5px 0 5px;
  font-size:24px;
}

.dashboard-welcome p{
  margin:0;
  color:#d2e2ed;
  font-size:12px;
}

.dashboard-period-card{
  position:relative;
  z-index:2;
  min-width:235px;
  padding:14px 15px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;
  background:rgba(4,28,47,.19);
  backdrop-filter:blur(6px);
}

.dashboard-period-card>span{
  display:block;
  color:#98c1d5;
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.dashboard-period-card>strong{
  display:block;
  margin:5px 0 11px;
  font-size:15px;
}

/* PREMIUM STATS */

.premium-stats{
  gap:15px;
}

.premium-stat-card{
  position:relative;
  overflow:hidden;
  min-height:134px;
  border:1px solid #e8edf2;
  box-shadow:0 10px 30px rgba(17,55,84,.055);
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.premium-stat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(17,55,84,.09);
}

.premium-stat-card:after{
  content:"";
  position:absolute;
  width:95px;
  height:95px;
  right:-45px;
  bottom:-50px;
  border-radius:50%;
  background:rgba(16,58,95,.025);
}

.stat-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.stat-icon{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:10px;
  font-size:12px;
  font-weight:900;
}

.stat-icon-teal{
  color:#087a74;
  background:#e5f8f5;
}

.stat-icon-blue{
  color:#205a84;
  background:#e8f1f8;
}

.stat-icon-gold{
  color:#8c6713;
  background:#fff5d9;
}

.stat-icon-success{
  color:#18794e;
  background:#e8f7f0;
}

.status-premium{
  border-top:1px solid #e8edf2!important;
}

/* PANEL */

.premium-panel{
  border:1px solid #e6edf2;
  box-shadow:0 12px 34px rgba(18,56,84,.055);
}

.premium-panel-head{
  align-items:center;
}

.premium-panel-head .eyebrow{
  display:block;
  margin-bottom:5px;
  font-size:9px;
}

.progress-legend{
  color:#7e8a96;
  font-size:10px;
  font-weight:800;
}

.legend-dot{
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:5px;
  border-radius:50%;
  background:#20a59c;
}

/* PROGRESS ACCORDION */

.progress-accordion{
  display:grid;
  gap:11px;
}

.progress-group{
  overflow:hidden;
  border:1px solid #e2eaf0;
  border-radius:15px;
  background:#fff;
  transition:box-shadow .18s ease;
}

.progress-group[open]{
  box-shadow:0 10px 26px rgba(20,59,88,.06);
}

.progress-group-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 16px;
  background:
    linear-gradient(180deg,#fff,#fafcfd);
}

.progress-group-summary::-webkit-details-marker{
  display:none;
}

.progress-group-title{
  display:flex;
  align-items:center;
  gap:12px;
}

.level-badge{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  color:#fff;
  background:
    linear-gradient(135deg,var(--navy),#2874a3);
  box-shadow:0 8px 18px rgba(20,66,100,.13);
  font-size:13px;
  font-weight:900;
}

.progress-group-title strong{
  display:block;
  color:#17364f;
  font-size:13px;
}

.progress-group-title small{
  display:block;
  margin-top:3px;
  color:#7b8b99;
  font-size:10px;
}

.progress-group-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.progress-summary-bar{
  width:120px;
  height:7px;
  overflow:hidden;
  border-radius:99px;
  background:#e9eef2;
}

.progress-summary-bar span{
  display:block;
  height:100%;
  border-radius:99px;
  background:
    linear-gradient(90deg,#168c8c,#2fc1b5);
}

.progress-percent{
  min-width:36px;
  color:#34556d;
  font-size:11px;
}

.accordion-arrow{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:8px;
  background:#f0f4f7;
  color:#315b77;
  font-size:15px;
  transition:transform .2s ease;
}

.progress-group[open] .accordion-arrow{
  transform:rotate(180deg);
}

.progress-group-body{
  padding:0 14px 14px;
  border-top:1px solid #edf1f4;
}

.premium-table-wrap{
  margin-top:12px;
  border-radius:11px;
}

.progress-table{
  min-width:650px;
}

.progress-table thead th{
  background:#f6f8fa;
}

.progress-cell{
  display:flex;
  align-items:center;
  gap:7px;
}

.premium-progress{
  width:150px;
}

.table-action{
  text-align:right;
}

.progress-action{
  border-color:#d3dee6;
  background:#fff;
}

.progress-action:hover{
  color:#fff;
  background:var(--navy);
  border-color:var(--navy);
}

.empty-state{
  padding:30px;
  border:1px dashed #d9e2e9;
  border-radius:13px;
  text-align:center;
  color:#7c8996;
  font-size:12px;
}

/* RESPONSIVE */

@media(max-width:900px){

  .topbar-right{
    display:none;
  }

  .dashboard-welcome{
    align-items:flex-start;
    flex-direction:column;
  }

  .dashboard-period-card{
    width:100%;
  }

}

@media(max-width:800px){

  .premium-login-wrap{
    grid-template-columns:1fr;
  }

  .premium-login-hero{
    display:none;
  }

  .premium-login-card{
    min-height:auto;
    padding:38px 30px;
  }

  .login-mobile-brand{
    display:flex;
    justify-content:center;
    margin-bottom:4px;
  }

  .mobile-login-logo{
    width:80px;
    height:80px;
    padding:5px;
    border-radius:20px;
    box-shadow:0 13px 30px rgba(17,54,84,.12);
  }

  .mobile-login-logo span{
    color:var(--navy);
  }

  .login-card-head{
    text-align:center;
  }

  .login-card-head p{
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
  }

  .dashboard-welcome-left{
    align-items:flex-start;
  }

  .progress-group-summary{
    align-items:flex-start;
  }

  .progress-summary-bar{
    display:none;
  }

}

@media(max-width:560px){

  .dashboard-logo-badge{
    width:57px;
    height:57px;
    flex-basis:57px;
    border-radius:16px;
  }

  .dashboard-welcome{
    padding:18px;
  }

  .dashboard-welcome h2{
    font-size:19px;
  }

  .progress-group-summary{
    gap:10px;
    padding:12px;
  }

  .progress-group-right{
    gap:5px;
  }

  .progress-group-title small{
    max-width:180px;
  }

  .progress-percent{
    min-width:auto;
  }

  .app-footer{
    padding-left:14px;
    padding-right:14px;
    text-align:center;
  }

  .premium-login{
    padding:14px;
  }

  .premium-login-card{
    padding:30px 22px;
  }

  .login-card-footer{
    line-height:1.6;
  }
}



/* =========================================================
   RAPOR MADIN NURUL HIDAYAH
   PREMIUM UI V2
   AUTH SAFE
   ========================================================= */

:root{
  --nh-navy:#103653;
  --nh-navy-dark:#08253b;
  --nh-blue:#235f88;
  --nh-teal:#168f8a;
  --nh-teal-light:#29b9ae;
  --nh-gold:#d5ad50;
  --nh-soft:#f4f7fa;
  --nh-border:#e4eaf0;
}


/* ---------- SHARED LOGO ---------- */

.app-logo{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:#fff;
}

.app-logo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.logo-fallback{
  display:none;
  width:100%;
  height:100%;
  place-items:center;
  color:var(--nh-navy);
  font-weight:900;
}


/* ---------- PREMIUM SIDEBAR ---------- */

.premium-sidebar{
  background:
    radial-gradient(
      circle at 14% 5%,
      rgba(45,125,168,.32),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #08263e 0%,
      #123f62 100%
    );

  box-shadow:
    12px 0 42px
    rgba(8,38,62,.11);
}

.premium-brand{
  min-height:73px;
  gap:12px;
}

.app-logo-sidebar{
  width:49px;
  height:49px;
  padding:3px;
  border-radius:15px;

  box-shadow:
    0 12px 28px
    rgba(0,0,0,.19);
}

.premium-brand-copy strong{
  display:block;

  font-size:14px;
  letter-spacing:.055em;
}

.premium-brand-copy small{
  display:block;

  margin-top:3px;

  color:#bbd2e2;
  font-size:11px;
}

.premium-nav{
  padding-top:14px!important;
  gap:3px!important;
}

.nav-section-title{
  margin-top:10px;
  padding:9px 12px 5px;

  color:#7195af;

  font-size:9px;
  font-weight:900;

  letter-spacing:.16em;

  text-transform:uppercase;
}

.premium-nav .nav-link{
  position:relative;

  display:flex;
  align-items:center;
  gap:10px;

  min-height:42px;

  padding:9px 11px;

  border:
    1px solid transparent;

  transition:.18s ease;
}

.premium-nav .nav-link:hover{
  background:
    rgba(255,255,255,.075);

  border-color:
    rgba(255,255,255,.065);
}

.premium-nav .nav-link.active{
  color:#fff;

  background:
    linear-gradient(
      90deg,
      rgba(22,143,138,.30),
      rgba(255,255,255,.06)
    );

  border-color:
    rgba(104,211,200,.17);
}

.premium-nav .nav-link.active:before{
  content:"";

  position:absolute;

  left:-1px;
  top:9px;
  bottom:9px;

  width:3px;

  border-radius:8px;

  background:#42d1c3;
}

.nav-symbol{
  width:24px;
  height:24px;

  display:grid;
  place-items:center;

  border-radius:8px;

  color:#80ddd5;

  background:
    rgba(255,255,255,.07);

  font-size:12px;
  font-weight:900;
}

.premium-sidebar-user{
  padding:14px!important;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:15px;

  background:
    rgba(255,255,255,.04);
}

.sidebar-user-caption{
  margin-bottom:5px;

  color:#6f9bb7;

  font-size:8px;
  font-weight:900;

  letter-spacing:.14em;
}

.sidebar-logout-btn{
  width:100%;
}


/* ---------- TOPBAR ---------- */

.premium-main{
  display:flex;
  flex-direction:column;
}

.premium-topbar{
  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 1px 0
    rgba(10,45,71,.035);

  backdrop-filter:
    blur(14px);
}

.topbar-title{
  flex:1;
}

.system-online{
  display:flex;
  align-items:center;
  gap:8px;

  padding:7px 11px;

  border:
    1px solid #e1e8ee;

  border-radius:999px;

  color:#597184;

  background:#f9fbfc;

  font-size:10px;
  font-weight:800;
}

.system-online>span{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#29ad77;

  box-shadow:
    0 0 0 4px
    rgba(41,173,119,.1);
}

.premium-content{
  width:100%;
  flex:1;
}


/* ---------- APP FOOTER ---------- */

.app-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;

  gap:7px;

  padding:
    3px 20px 24px;

  color:#7d8a97;

  font-size:10px;
}

.app-footer a,
.login-love-footer a{
  color:var(--nh-teal);
  font-weight:900;
}

.love-heart{
  color:#e14f65;
  margin:0 2px;
}

.footer-divider{
  color:#c8d0d7;
}


/* ---------- LOGIN ---------- */

.premium-login{
  position:relative;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 10% 0%,
      #387fa8 0%,
      transparent 35%
    ),
    radial-gradient(
      circle at 90% 100%,
      rgba(22,143,138,.22),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #153d5d 0%,
      #071d2e 68%,
      #051622 100%
    );
}

.premium-login-shell{
  position:relative;
  z-index:3;

  width:min(1100px,100%);
}

.login-decoration{
  position:fixed;

  pointer-events:none;

  border-radius:50%;
}

.login-decoration-one{
  width:430px;
  height:430px;

  left:-190px;
  bottom:-185px;

  border:
    1px solid
    rgba(255,255,255,.055);

  box-shadow:
    0 0 0 55px rgba(255,255,255,.014),
    0 0 0 110px rgba(255,255,255,.009);
}

.login-decoration-two{
  width:290px;
  height:290px;

  right:-120px;
  top:-100px;

  background:
    rgba(30,168,158,.055);
}

.premium-login-wrap{
  grid-template-columns:
    1.08fr .92fr;

  border:
    1px solid
    rgba(255,255,255,.11);

  box-shadow:
    0 38px 100px
    rgba(0,14,27,.45);
}

.premium-login-hero{
  position:relative;

  overflow:hidden;

  padding:
    48px 56px;

  background:
    linear-gradient(
      145deg,
      rgba(21,67,101,.98),
      rgba(7,38,62,.99)
    );
}

.hero-pattern{
  position:absolute;

  width:350px;
  height:350px;

  right:-170px;
  bottom:-150px;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius:50%;

  box-shadow:
    0 0 0 44px rgba(255,255,255,.019),
    0 0 0 88px rgba(255,255,255,.012);
}

.login-brand-row{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  gap:15px;
}

.app-logo-login{
  width:78px;
  height:78px;

  padding:4px;

  border-radius:21px;

  box-shadow:
    0 18px 40px
    rgba(0,0,0,.24);
}

.login-eyebrow{
  color:#82ddd5!important;
}

.login-school-name{
  margin-top:4px;

  color:#fff;

  font-size:19px;
  font-weight:900;
}

.login-hero-main{
  position:relative;
  z-index:2;

  margin-top:47px;
}

.premium-chip{
  display:inline-flex;

  padding:
    7px 11px;

  border:
    1px solid
    rgba(116,223,214,.23);

  border-radius:999px;

  color:#8fe3dc;

  background:
    rgba(22,143,138,.15);

  font-size:9px;
  font-weight:900;

  letter-spacing:.13em;

  text-transform:uppercase;
}

.premium-login-hero h1{
  margin:
    16px 0 15px;

  font-size:47px;
  line-height:.98;

  letter-spacing:-.035em;
}

.premium-login-hero h1 small{
  display:block;

  margin-top:10px;

  color:#aadeda;

  font-size:.72em;
  font-weight:800;
}

.premium-login-hero p{
  max-width:510px;

  color:#c8dbe8;

  line-height:1.72;
}

.premium-hero-tags{
  margin-top:22px;
}

.login-feature-grid{
  display:grid;
  grid-template-columns:
    repeat(3,1fr);

  gap:9px;

  margin-top:28px;
}

.login-feature-grid>div{
  padding:11px 12px;

  border:
    1px solid
    rgba(255,255,255,.085);

  border-radius:13px;

  background:
    rgba(255,255,255,.04);
}

.login-feature-grid strong{
  display:block;

  color:#fff;

  font-size:17px;
}

.login-feature-grid span{
  display:block;

  margin-top:2px;

  color:#9bb9cd;

  font-size:9px;
}

.login-hero-footer{
  position:absolute;

  left:56px;
  bottom:30px;

  color:#779bb4;

  font-size:9px;
}

.premium-login-card{
  padding:52px;

  background:
    linear-gradient(
      180deg,
      #fff,
      #fafcfd
    );
}

.login-card-head h2{
  margin:7px 0;

  color:#17324a;

  font-size:31px;

  letter-spacing:-.025em;
}

.login-card-head p{
  max-width:390px;

  line-height:1.6;
}

.premium-login-form{
  gap:17px;
}

.premium-input-wrap{
  position:relative;
}

.premium-input-wrap input{
  min-height:48px;

  padding-left:43px;

  border-color:#d6e0e8;

  background:#fbfcfe;
}

.premium-input-icon{
  position:absolute;

  left:12px;
  top:50%;

  transform:
    translateY(-50%);

  display:grid;
  place-items:center;

  width:24px;
  height:24px;

  color:#6c8ca3;

  font-size:10px;
  font-weight:900;

  pointer-events:none;
}

.premium-login-button{
  min-height:48px;

  margin-top:3px;

  border:0;

  background:
    linear-gradient(
      110deg,
      #123e61,
      #22668e
    );

  box-shadow:
    0 12px 25px
    rgba(18,62,97,.17);
}

.login-secure-info{
  display:flex;
  justify-content:center;
  align-items:center;

  gap:8px;

  color:#7b8995;

  font-size:9px;
}

.login-secure-info>span{
  width:6px;
  height:6px;

  border-radius:50%;

  background:#2eaf7b;

  box-shadow:
    0 0 0 4px
    rgba(46,175,123,.09);
}

.login-love-footer{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:7px;

  padding-top:17px;

  border-top:
    1px solid #edf1f3;

  color:#87949f;

  font-size:9px;
}

.login-love-footer i{
  color:#c6cfd6;
}

.premium-login-bottom{
  padding-top:13px;

  text-align:center;

  color:
    rgba(255,255,255,.44);

  font-size:9px;
}

.mobile-login-logo{
  display:none;
}


/* ---------- DASHBOARD HERO ---------- */

.dashboard-hero{
  position:relative;

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:22px;

  margin-bottom:20px;

  padding:21px 23px;

  border-radius:20px;

  color:#fff;

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(52,188,176,.23),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      #113b5d,
      #245f87
    );

  box-shadow:
    0 18px 40px
    rgba(14,53,82,.13);
}

.dashboard-hero:after{
  content:"";

  position:absolute;

  width:210px;
  height:210px;

  right:-80px;
  bottom:-120px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:50%;

  box-shadow:
    0 0 0 38px rgba(255,255,255,.02),
    0 0 0 76px rgba(255,255,255,.013);
}

.dashboard-hero-left{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;

  gap:16px;
}

.dashboard-brand-logo{
  width:69px;
  height:69px;

  flex:0 0 69px;

  display:grid;
  place-items:center;

  padding:4px;

  overflow:hidden;

  border-radius:19px;

  background:#fff;

  box-shadow:
    0 13px 29px
    rgba(0,0,0,.17);
}

.dashboard-brand-logo img{
  width:100%;
  height:100%;

  object-fit:contain;
}

.dashboard-brand-logo
.logo-fallback{
  color:var(--nh-navy);
}

.dashboard-kicker{
  color:#7de1d7;

  font-size:9px;
  font-weight:900;

  letter-spacing:.14em;
}

.dashboard-hero h2{
  margin:
    5px 0 4px;

  font-size:22px;
}

.dashboard-hero p{
  margin:0;

  color:#d0e1ec;

  font-size:11px;
}

.dashboard-period-box{
  position:relative;
  z-index:2;

  min-width:235px;

  padding:13px 14px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:15px;

  background:
    rgba(4,28,46,.18);
}

.dashboard-period-box>span{
  display:block;

  color:#95bfd4;

  font-size:8px;
  font-weight:900;

  letter-spacing:.13em;
}

.dashboard-period-box>strong{
  display:block;

  margin:
    5px 0 10px;

  font-size:14px;
}


/* ---------- STAT CARDS ---------- */

.premium-stats-grid{
  gap:14px;
}

.premium-stat{
  position:relative;

  overflow:hidden;

  min-height:128px;

  border:
    1px solid #e6ecf1;

  box-shadow:
    0 9px 27px
    rgba(17,55,82,.05);

  transition:
    .18s ease;
}

.premium-stat:hover{
  transform:
    translateY(-2px);

  box-shadow:
    0 14px 34px
    rgba(17,55,82,.085);
}

.premium-stat:after{
  content:"";

  position:absolute;

  width:90px;
  height:90px;

  right:-43px;
  bottom:-47px;

  border-radius:50%;

  background:
    rgba(17,60,91,.025);
}

.premium-stat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.stat-symbol{
  width:31px;
  height:31px;

  display:grid;
  place-items:center;

  border-radius:10px;

  font-size:11px;
  font-weight:900;
}

.stat-symbol.teal{
  color:#0c756f;
  background:#e5f7f5;
}

.stat-symbol.blue{
  color:#285d82;
  background:#e9f1f7;
}

.stat-symbol.gold{
  color:#866218;
  background:#fff4d9;
}

.stat-symbol.green{
  color:#18764e;
  background:#e8f6ef;
}

.system-active-text{
  color:#18764e!important;
}


/* ---------- PROGRESS ACCORDION ---------- */

.premium-progress-panel{
  border:
    1px solid #e5ebf0;

  box-shadow:
    0 11px 31px
    rgba(16,54,82,.05);
}

.premium-progress-head{
  align-items:center;
}

.section-kicker{
  display:block;

  margin-bottom:5px;

  color:var(--nh-teal);

  font-size:8px;
  font-weight:900;

  letter-spacing:.14em;
}

.period-indicator{
  display:flex;
  align-items:center;

  gap:7px;

  color:#738492;

  font-size:9px;
  font-weight:800;
}

.period-indicator>span{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#20a49b;

  box-shadow:
    0 0 0 4px
    rgba(32,164,155,.08);
}

.level-accordion{
  display:grid;
  gap:10px;
}

.level-progress-card{
  overflow:hidden;

  border:
    1px solid #e1e8ee;

  border-radius:14px;

  background:#fff;
}

.level-progress-card[open]{
  box-shadow:
    0 9px 25px
    rgba(18,57,85,.055);
}

.level-progress-summary{
  cursor:pointer;

  list-style:none;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  padding:
    13px 15px;

  background:
    linear-gradient(
      180deg,
      #fff,
      #fafcfd
    );
}

.level-progress-summary::-webkit-details-marker{
  display:none;
}

.level-progress-name{
  display:flex;
  align-items:center;

  gap:11px;
}

.level-letter{
  width:37px;
  height:37px;

  display:grid;
  place-items:center;

  border-radius:11px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--nh-navy),
      #2876a2
    );

  box-shadow:
    0 7px 17px
    rgba(16,55,83,.13);

  font-size:12px;
  font-weight:900;
}

.level-progress-name strong{
  display:block;

  color:#17374f;

  font-size:12px;
}

.level-progress-name small{
  display:block;

  margin-top:3px;

  color:#798a98;

  font-size:9px;
}

.level-progress-meta{
  display:flex;
  align-items:center;

  gap:9px;
}

.level-progress-bar{
  width:120px;
  height:7px;

  overflow:hidden;

  border-radius:99px;

  background:#e9eef2;
}

.level-progress-bar span{
  display:block;

  height:100%;

  border-radius:99px;

  background:
    linear-gradient(
      90deg,
      var(--nh-teal),
      #2dc0b4
    );
}

.level-progress-meta>strong{
  min-width:35px;

  color:#36586f;

  font-size:10px;
}

.accordion-chevron{
  width:26px;
  height:26px;

  display:grid;
  place-items:center;

  border-radius:8px;

  color:#315c77;

  background:#eef3f6;

  transition:
    transform .18s ease;
}

.level-progress-card[open]
.accordion-chevron{
  transform:
    rotate(180deg);
}

.level-progress-body{
  padding:
    0 13px 13px;

  border-top:
    1px solid #edf1f4;
}

.level-progress-body .table-wrap{
  margin-top:11px;
}

.dashboard-progress-table{
  min-width:650px;
}

.row-progress-wrap{
  display:flex;
  align-items:center;

  gap:7px;
}

.row-progress{
  width:150px;
}

.action-cell{
  text-align:right;
}

.dashboard-grade-btn{
  background:#fff;
}

.dashboard-grade-btn:hover{
  color:#fff;

  border-color:
    var(--nh-navy);

  background:
    var(--nh-navy);
}

.dashboard-empty{
  padding:28px;

  border:
    1px dashed #d8e1e8;

  border-radius:12px;

  color:#7b8995;

  text-align:center;

  font-size:11px;
}


/* ---------- RESPONSIVE ---------- */

@media(max-width:900px){

  .system-online{
    display:none;
  }

  .dashboard-hero{
    align-items:flex-start;
    flex-direction:column;
  }

  .dashboard-period-box{
    width:100%;
  }

}

@media(max-width:800px){

  .premium-login-wrap{
    grid-template-columns:1fr;
  }

  .premium-login-hero{
    display:none;
  }

  .premium-login-card{
    min-height:auto;

    padding:
      38px 30px;
  }

  .mobile-login-logo{
    display:flex;
    justify-content:center;

    margin-bottom:4px;
  }

  .app-logo-mobile{
    width:78px;
    height:78px;

    padding:4px;

    border-radius:20px;

    box-shadow:
      0 12px 29px
      rgba(17,54,82,.12);
  }

  .login-card-head{
    text-align:center;
  }

  .login-card-head p{
    margin-left:auto;
    margin-right:auto;
  }

  .level-progress-bar{
    display:none;
  }

}

@media(max-width:560px){

  .dashboard-hero{
    padding:17px;
  }

  .dashboard-brand-logo{
    width:55px;
    height:55px;

    flex-basis:55px;

    border-radius:15px;
  }

  .dashboard-hero h2{
    font-size:18px;
  }

  .dashboard-hero-left{
    align-items:flex-start;
  }

  .level-progress-summary{
    padding:11px;
  }

  .level-progress-meta{
    gap:5px;
  }

  .level-progress-meta>strong{
    min-width:auto;
  }

  .premium-login{
    padding:14px;
  }

  .premium-login-card{
    padding:
      29px 21px;
  }

  .app-footer{
    padding-left:14px;
    padding-right:14px;

    text-align:center;
  }

}



/* ==========================================================
   RAPOR MADIN NURUL HIDAYAH
   LOGIN RESPONSIVE PREMIUM V3

   Semua selector memakai prefix login-v3-
   agar tidak bentrok dengan CSS login sebelumnya.
   ========================================================== */


.login-v3-page{
  margin:0;
  min-height:100vh;
  min-height:100dvh;

  color:#172b3f;

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(54,137,181,.55),
      transparent 34%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(22,143,138,.15),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #194e73 0%,
      #0b2e4a 48%,
      #061c2f 100%
    );

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


.login-v3-page *,
.login-v3-page *::before,
.login-v3-page *::after{
  box-sizing:border-box;
}


.login-v3-stage{
  position:relative;
  z-index:1;

  width:100%;
  min-height:100vh;
  min-height:100dvh;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  padding:
    34px 22px 20px;
}


.login-v3-card{
  width:min(1120px,100%);

  display:grid;
  grid-template-columns:
    minmax(0,1.08fr)
    minmax(400px,.92fr);

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:30px;

  background:#fff;

  box-shadow:
    0 36px 100px
    rgba(0,15,29,.38);
}


/* ======================
   DESKTOP BRAND PANEL
   ====================== */

.login-v3-brand{
  position:relative;

  min-height:590px;

  overflow:hidden;

  display:flex;
  flex-direction:column;

  padding:48px 54px 36px;

  color:#fff;

  background:
    radial-gradient(
      circle at 86% 8%,
      rgba(45,194,181,.17),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #174b71 0%,
      #0c3557 50%,
      #082945 100%
    );
}


.login-v3-brand::after{
  content:"";

  position:absolute;

  width:380px;
  height:380px;

  right:-190px;
  bottom:-180px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:50%;

  box-shadow:
    0 0 0 50px rgba(255,255,255,.018),
    0 0 0 100px rgba(255,255,255,.012);

  pointer-events:none;
}


.login-v3-brand-glow{
  position:absolute;

  width:260px;
  height:260px;

  top:-110px;
  right:-70px;

  border-radius:50%;

  background:
    rgba(25,177,166,.10);

  filter:blur(16px);

  pointer-events:none;
}


.login-v3-brand-top{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;

  gap:16px;
}


.login-v3-logo{
  flex:0 0 auto;

  display:grid;
  place-items:center;

  overflow:hidden;

  background:#fff;

  box-shadow:
    0 15px 36px
    rgba(0,0,0,.18);
}


.login-v3-logo img{
  display:block;

  width:100%!important;
  height:100%!important;

  max-width:100%!important;
  max-height:100%!important;

  object-fit:contain!important;

  position:static!important;

  transform:none!important;
}


.login-v3-logo>span{
  display:none;

  width:100%;
  height:100%;

  place-items:center;

  color:#124565;

  font-weight:900;
}


.login-v3-logo-desktop{
  width:86px!important;
  height:86px!important;

  padding:5px;

  border-radius:22px;
}


.login-v3-school small{
  display:block;

  margin-bottom:4px;

  color:#78dcd4;

  font-size:10px;
  font-weight:900;

  letter-spacing:.16em;
}


.login-v3-school strong{
  display:block;

  font-size:20px;
  font-weight:900;
}


.login-v3-brand-content{
  position:relative;
  z-index:2;

  margin-top:52px;
}


.login-v3-chip{
  display:inline-flex;

  padding:7px 11px;

  border:
    1px solid
    rgba(111,225,214,.22);

  border-radius:999px;

  color:#8be5dc;

  background:
    rgba(16,149,140,.13);

  font-size:9px;
  font-weight:900;

  letter-spacing:.14em;
}


.login-v3-brand-content h1{
  margin:
    17px 0 17px;

  color:#fff;

  font-size:48px;
  font-weight:900;

  line-height:.98;

  letter-spacing:-.035em;
}


.login-v3-brand-content h1 em{
  display:block;

  margin-top:9px;

  color:#a7ddd9;

  font-size:.76em;
  font-style:normal;
}


.login-v3-brand-content>p{
  max-width:505px;

  margin:0;

  color:#c9dce8;

  font-size:15px;
  line-height:1.7;
}


.login-v3-levels{
  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin-top:24px;
}


.login-v3-levels span{
  padding:7px 11px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:999px;

  color:#fff;

  background:
    rgba(255,255,255,.055);

  font-size:9px;
  font-weight:900;
}


.login-v3-brand-stats{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:9px;

  margin-top:28px;
}


.login-v3-brand-stats>div{
  padding:12px 13px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:14px;

  background:
    rgba(255,255,255,.04);
}


.login-v3-brand-stats strong{
  display:block;

  color:#fff;

  font-size:18px;
}


.login-v3-brand-stats span{
  display:block;

  margin-top:2px;

  color:#9bbbd0;

  font-size:9px;
}


.login-v3-brand-foot{
  position:relative;
  z-index:2;

  margin-top:auto;

  color:#769ab3;

  font-size:9px;
}


/* ======================
   FORM PANEL
   ====================== */

.login-v3-form-panel{
  position:relative;
  z-index:3;

  min-width:0;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:50px 52px;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfd 100%
    );
}


.login-v3-mobile-brand{
  display:none;
}


.login-v3-heading>span{
  display:block;

  color:#168f8a;

  font-size:10px;
  font-weight:900;

  letter-spacing:.16em;
}


.login-v3-heading h2{
  margin:
    8px 0 8px;

  color:#172d43;

  font-size:34px;
  font-weight:800;

  line-height:1.15;

  letter-spacing:-.025em;
}


.login-v3-heading p{
  max-width:420px;

  margin:
    0 0 26px;

  color:#6b7986;

  font-size:15px;
  line-height:1.6;
}


.login-v3-form{
  display:grid;

  gap:17px;

  position:relative;
  z-index:4;
}


.login-v3-form label{
  display:block;
}


.login-v3-label{
  display:block;

  margin-bottom:7px;

  color:#425363;

  font-size:12px;
  font-weight:800;
}


.login-v3-input-wrap{
  position:relative;

  width:100%;
}


.login-v3-input-wrap input{
  display:block;

  width:100%!important;
  height:50px;

  margin:0!important;

  padding:
    0 15px 0 45px!important;

  border:
    1px solid #d4dfe7!important;

  border-radius:13px!important;

  outline:none;

  color:#193247;

  background:#fbfcfd!important;

  font:inherit;

  box-shadow:none!important;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}


.login-v3-input-wrap input:focus{
  border-color:
    #269c98!important;

  box-shadow:
    0 0 0 4px
    rgba(38,156,152,.09)!important;
}


.login-v3-input-wrap input::placeholder{
  color:#929ca5;
}


.login-v3-input-icon{
  position:absolute;

  z-index:2;

  left:14px;
  top:50%;

  transform:
    translateY(-50%);

  width:22px;

  color:#67869c;

  font-size:11px;
  font-weight:900;

  pointer-events:none;
}


.login-v3-submit{
  width:100%;
  min-height:50px;

  margin-top:3px;

  border:0;
  border-radius:13px;

  cursor:pointer;

  color:#fff;

  background:
    linear-gradient(
      110deg,
      #123f63,
      #205f88
    );

  font:inherit;
  font-size:14px;
  font-weight:900;

  box-shadow:
    0 13px 28px
    rgba(18,63,99,.17);

  transition:.16s ease;
}


.login-v3-submit:hover{
  transform:
    translateY(-1px);

  box-shadow:
    0 16px 32px
    rgba(18,63,99,.22);
}


.login-v3-security{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  margin-top:18px;

  color:#7d8994;

  font-size:10px;
}


.login-v3-security i{
  display:block;

  width:7px;
  height:7px;

  border-radius:50%;

  background:#2eae7b;

  box-shadow:
    0 0 0 4px
    rgba(46,174,123,.09);
}


.login-v3-footer{
  display:grid;

  gap:5px;

  margin-top:22px;
  padding-top:17px;

  border-top:
    1px solid #edf1f4;

  color:#87939e;

  text-align:center;

  font-size:10px;
  line-height:1.5;
}


.login-v3-love b{
  color:#e34c64;

  margin:0 2px;
}


.login-v3-love a{
  color:#168f8a;

  font-weight:900;
  text-decoration:none;
}


.login-v3-copyright{
  padding-top:13px;

  color:
    rgba(255,255,255,.45);

  text-align:center;

  font-size:9px;
}


/* ==========================================================
   TABLET + MOBILE

   PENTING:
   Panel logo besar desktop benar-benar dihilangkan.
   Tidak ada logo background/watermark di belakang form.
   ========================================================== */

@media(max-width:820px){

  .login-v3-stage{
    justify-content:flex-start;

    padding:
      max(18px,env(safe-area-inset-top))
      14px
      max(16px,env(safe-area-inset-bottom));
  }


  .login-v3-card{
    display:block!important;

    width:min(100%,470px);

    margin:auto;

    border-radius:26px!important;

    overflow:hidden!important;

    background:#fff!important;
  }


  .login-v3-brand{
    display:none!important;
  }


  .login-v3-form-panel{
    position:relative!important;

    z-index:10!important;

    width:100%!important;
    min-height:0!important;

    overflow:hidden!important;

    padding:
      29px 24px 24px!important;

    background:
      #fff!important;
  }


  /*
   * Ini mencegah SEMUA image/dekorasi lama
   * ikut membesar di dalam panel form.
   */
  .login-v3-form-panel
  > img:not(.allowed-mobile-image){
    display:none!important;
  }


  .login-v3-form-panel::before,
  .login-v3-form-panel::after{
    display:none!important;
    content:none!important;
  }


  .login-v3-mobile-brand{
    position:relative!important;

    z-index:20!important;

    display:flex!important;
    align-items:center!important;

    gap:12px!important;

    margin:
      0 0 24px!important;
  }


  .login-v3-logo-mobile{
    position:relative!important;

    width:62px!important;
    min-width:62px!important;
    max-width:62px!important;

    height:62px!important;
    min-height:62px!important;
    max-height:62px!important;

    padding:4px!important;

    overflow:hidden!important;

    border:
      1px solid #e3e9ee!important;

    border-radius:17px!important;

    background:#fff!important;

    box-shadow:
      0 10px 25px
      rgba(15,55,84,.12)!important;
  }


  .login-v3-logo-mobile img{
    display:block!important;

    position:static!important;

    width:100%!important;
    max-width:100%!important;

    height:100%!important;
    max-height:100%!important;

    margin:0!important;
    padding:0!important;

    object-fit:contain!important;

    opacity:1!important;

    transform:none!important;

    filter:none!important;
  }


  .login-v3-mobile-brand>div:last-child{
    min-width:0;
  }


  .login-v3-mobile-brand strong{
    display:block;

    color:#18364e;

    font-size:14px;
    font-weight:900;

    letter-spacing:.04em;
  }


  .login-v3-mobile-brand small{
    display:block;

    margin-top:2px;

    color:#71818f;

    font-size:11px;
  }


  .login-v3-heading{
    position:relative;

    z-index:20;

    text-align:left;
  }


  .login-v3-heading>span{
    font-size:9px;
  }


  .login-v3-heading h2{
    margin-top:7px;

    font-size:29px!important;

    line-height:1.15!important;
  }


  .login-v3-heading p{
    margin-bottom:22px;

    font-size:14px!important;
    line-height:1.55!important;
  }


  .login-v3-form{
    position:relative;

    z-index:20;
  }


  .login-v3-input-wrap{
    position:relative;

    z-index:20;
  }


  .login-v3-input-wrap input{
    position:relative!important;

    z-index:21!important;

    height:50px!important;

    font-size:16px!important;
  }


  .login-v3-input-icon{
    z-index:22!important;
  }


  .login-v3-submit{
    position:relative;

    z-index:20;

    min-height:51px;

    font-size:14px;
  }


  .login-v3-security,
  .login-v3-footer{
    position:relative;

    z-index:20;
  }


  .login-v3-security{
    margin-top:17px;

    font-size:10px;
  }


  .login-v3-footer{
    margin-top:20px;

    font-size:10px;
  }


  .login-v3-copyright{
    padding:
      12px 8px 0;

    font-size:9px;
  }

}


/* ======================
   SMALL MOBILE
   ====================== */

@media(max-width:430px){

  .login-v3-stage{
    padding:
      14px 12px
      max(14px,env(safe-area-inset-bottom));
  }


  .login-v3-card{
    border-radius:23px!important;
  }


  .login-v3-form-panel{
    padding:
      25px 20px 22px!important;
  }


  .login-v3-logo-mobile{
    width:56px!important;
    min-width:56px!important;
    max-width:56px!important;

    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;

    border-radius:15px!important;
  }


  .login-v3-mobile-brand{
    margin-bottom:21px!important;
  }


  .login-v3-heading h2{
    font-size:27px!important;
  }


  .login-v3-heading p{
    font-size:13px!important;
  }


  .login-v3-label{
    font-size:11px;
  }


  .login-v3-footer{
    font-size:9.5px;
  }

}


/* ======================
   VERY SMALL MOBILE
   ====================== */

@media(max-width:360px){

  .login-v3-form-panel{
    padding:
      22px 17px 20px!important;
  }


  .login-v3-heading h2{
    font-size:25px!important;
  }


  .login-v3-security{
    font-size:9px;
  }

}


/* =========================================================
   RAPOR MADIN - PASSWORD VISIBILITY TOGGLE
   ========================================================= */

.login-v3-input-wrap input[type="password"],
.login-v3-input-wrap input[type="text"]{
  padding-right:52px!important;
}

.login-v3-password-toggle{
  position:absolute;
  z-index:30;

  top:50%;
  right:12px;

  transform:translateY(-50%);

  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  padding:0;
  margin:0;

  border:0;
  border-radius:10px;

  cursor:pointer;

  color:#718b9e;

  background:transparent;

  transition:
    color .15s ease,
    background .15s ease;
}

.login-v3-password-toggle:hover{
  color:#175978;
  background:#eef5f7;
}

.login-v3-password-toggle:focus-visible{
  outline:2px solid rgba(22,143,138,.35);
  outline-offset:2px;
}

.login-v3-password-toggle svg{
  width:21px;
  height:21px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.login-v3-password-toggle .eye-hide{
  display:none;
}

.login-v3-password-toggle.is-visible .eye-show{
  display:none;
}

.login-v3-password-toggle.is-visible .eye-hide{
  display:block;
}

@media(max-width:820px){
  .login-v3-password-toggle{
    right:10px;
    width:38px;
    height:38px;
  }

  .login-v3-password-toggle svg{
    width:22px;
    height:22px;
  }
}


/* =========================================================
   RAPOR MADIN NURUL HIDAYAH
   DASHBOARD MOBILE FIX V3
   ========================================================= */


/* ---------- PROTEKSI LOGO GLOBAL APP ---------- */

.premium-sidebar .app-logo-sidebar{
  position:relative !important;

  width:46px !important;
  min-width:46px !important;
  max-width:46px !important;

  height:46px !important;
  min-height:46px !important;
  max-height:46px !important;

  padding:3px !important;

  overflow:hidden !important;

  border-radius:14px !important;

  background:#fff !important;
}


.premium-sidebar .app-logo-sidebar img{
  position:static !important;

  display:block !important;

  width:100% !important;
  max-width:100% !important;

  height:100% !important;
  max-height:100% !important;

  margin:0 !important;
  padding:0 !important;

  object-fit:contain !important;

  transform:none !important;
  opacity:1 !important;
}


.premium-sidebar .app-logo-sidebar .logo-fallback{
  display:none !important;
}


/* ---------- DASHBOARD HERO LOGO ---------- */

.dashboard-brand-logo{
  position:relative !important;

  width:68px !important;
  min-width:68px !important;
  max-width:68px !important;

  height:68px !important;
  min-height:68px !important;
  max-height:68px !important;

  flex:0 0 68px !important;

  padding:4px !important;

  overflow:hidden !important;

  border-radius:18px !important;

  background:#fff !important;
}


.dashboard-brand-logo img{
  position:static !important;

  display:block !important;

  width:100% !important;
  max-width:100% !important;

  height:100% !important;
  max-height:100% !important;

  margin:0 !important;
  padding:0 !important;

  object-fit:contain !important;

  transform:none !important;
  opacity:1 !important;
}


.dashboard-brand-logo .logo-fallback{
  display:none !important;
}


/* ---------- SIDEBAR SAFETY ---------- */

.premium-sidebar{
  overflow-x:hidden !important;
}

.premium-brand{
  display:flex !important;

  align-items:center !important;

  gap:12px !important;

  overflow:hidden !important;
}


.premium-brand-copy{
  min-width:0 !important;
}


.premium-brand-copy strong,
.premium-brand-copy small{
  white-space:nowrap !important;

  overflow:hidden !important;

  text-overflow:ellipsis !important;
}


/* ---------- DESKTOP HERO SAFETY ---------- */

.dashboard-hero{
  overflow:hidden !important;
}


.dashboard-hero-left{
  min-width:0 !important;
}


.dashboard-hero-left > div:last-child{
  min-width:0 !important;
}


/* =========================================================
   MOBILE DASHBOARD
   ========================================================= */

@media(max-width:899px){


  /* ----- SIDEBAR DRAWER ----- */

  .premium-sidebar{
    position:fixed !important;

    z-index:1200 !important;

    top:0 !important;
    bottom:0 !important;
    left:-290px !important;

    width:270px !important;
    max-width:86vw !important;

    height:100dvh !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    transition:left .22s ease !important;

    box-shadow:
      18px 0 46px
      rgba(0,20,36,.24) !important;
  }


  .premium-sidebar.open{
    left:0 !important;
  }


  .premium-sidebar .premium-brand{
    width:100% !important;

    padding:
      18px 12px 20px !important;
  }


  .premium-sidebar .app-logo-sidebar{
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
  }


  /* ----- MAIN ----- */

  .premium-main,
  .main{
    width:100% !important;

    min-width:0 !important;

    margin:0 !important;
  }


  /* ----- TOPBAR ----- */

  .premium-topbar,
  .topbar{
    position:sticky !important;

    z-index:900 !important;

    top:0 !important;

    width:100% !important;

    min-height:70px !important;

    display:flex !important;

    align-items:center !important;

    gap:12px !important;

    padding:
      11px 16px !important;

    background:
      rgba(255,255,255,.97) !important;

    backdrop-filter:
      blur(14px) !important;

    box-shadow:
      0 1px 0
      rgba(15,49,76,.07) !important;
  }


  .menu-btn{
    display:grid !important;

    place-items:center !important;

    width:42px !important;
    min-width:42px !important;

    height:42px !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    border-radius:12px !important;

    color:#18364e !important;

    background:#f1f5f8 !important;

    font-size:23px !important;
    line-height:1 !important;
  }


  .topbar-title{
    min-width:0 !important;

    flex:1 !important;
  }


  .topbar-title h1{
    margin:0 !important;

    overflow:hidden !important;

    color:#172f46 !important;

    font-size:18px !important;
    line-height:1.15 !important;

    white-space:nowrap !important;

    text-overflow:ellipsis !important;
  }


  .topbar-title p{
    margin:
      4px 0 0 !important;

    overflow:hidden !important;

    color:#83909b !important;

    font-size:11px !important;

    white-space:nowrap !important;

    text-overflow:ellipsis !important;
  }


  .system-online{
    display:none !important;
  }


  /* ----- CONTENT ----- */

  .premium-content,
  .content{
    width:100% !important;

    min-width:0 !important;

    padding:
      16px !important;
  }


  /* ----- HERO ----- */

  .dashboard-hero{
    position:relative !important;

    display:block !important;

    width:100% !important;

    margin:
      0 0 14px !important;

    padding:
      18px !important;

    overflow:hidden !important;

    border-radius:20px !important;

    color:#fff !important;

    background:
      radial-gradient(
        circle at 95% 0%,
        rgba(54,203,190,.25),
        transparent 35%
      ),
      linear-gradient(
        135deg,
        #123d5e 0%,
        #1d5d84 100%
      ) !important;

    box-shadow:
      0 14px 32px
      rgba(16,57,86,.13) !important;
  }


  .dashboard-hero::after{
    content:"" !important;

    display:block !important;

    position:absolute !important;

    width:180px !important;
    height:180px !important;

    right:-95px !important;
    bottom:-105px !important;

    border:
      1px solid
      rgba(255,255,255,.08) !important;

    border-radius:50% !important;

    pointer-events:none !important;
  }


  .dashboard-hero-left{
    position:relative !important;

    z-index:2 !important;

    display:flex !important;

    align-items:center !important;

    gap:13px !important;

    width:100% !important;

    min-width:0 !important;
  }


  .dashboard-brand-logo{
    position:relative !important;

    width:57px !important;
    min-width:57px !important;
    max-width:57px !important;

    height:57px !important;
    min-height:57px !important;
    max-height:57px !important;

    flex:0 0 57px !important;

    padding:4px !important;

    overflow:hidden !important;

    border-radius:16px !important;

    background:#fff !important;

    box-shadow:
      0 10px 24px
      rgba(0,0,0,.16) !important;
  }


  .dashboard-brand-logo img{
    position:static !important;

    width:100% !important;
    max-width:100% !important;

    height:100% !important;
    max-height:100% !important;

    object-fit:contain !important;

    transform:none !important;
  }


  .dashboard-kicker{
    display:block !important;

    margin:0 0 4px !important;

    color:#77dfd5 !important;

    font-size:8px !important;
    font-weight:900 !important;

    letter-spacing:.12em !important;
  }


  .dashboard-hero h2{
    margin:
      0 0 4px !important;

    color:#fff !important;

    font-size:18px !important;
    line-height:1.2 !important;

    letter-spacing:-.015em !important;
  }


  .dashboard-hero p{
    margin:0 !important;

    color:#d1e2ec !important;

    font-size:10.5px !important;
    line-height:1.45 !important;
  }


  /* periode jadi strip compact */

  .dashboard-period-box{
    position:relative !important;

    z-index:2 !important;

    width:100% !important;
    min-width:0 !important;

    margin:
      15px 0 0 !important;

    padding:
      11px 12px !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      auto !important;

    grid-template-areas:
      "label button"
      "period button" !important;

    column-gap:12px !important;

    border:
      1px solid
      rgba(255,255,255,.14) !important;

    border-radius:13px !important;

    background:
      rgba(4,28,46,.20) !important;
  }


  .dashboard-period-box > span{
    grid-area:label !important;

    margin:0 !important;

    color:#9bc5d8 !important;

    font-size:7.5px !important;
  }


  .dashboard-period-box > strong{
    grid-area:period !important;

    margin:
      3px 0 0 !important;

    color:#fff !important;

    font-size:12px !important;
    line-height:1.25 !important;
  }


  .dashboard-period-box > a{
    grid-area:button !important;

    align-self:center !important;

    margin:0 !important;

    white-space:nowrap !important;
  }


  /* ----- STAT CARD ----- */

  .premium-stats-grid,
  .stats-grid{
    width:100% !important;

    display:grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:10px !important;

    margin-bottom:14px !important;
  }


  .premium-stat,
  .stat-card{
    width:100% !important;

    min-width:0 !important;
    min-height:112px !important;

    padding:
      14px !important;

    border-radius:16px !important;
  }


  .premium-stat strong{
    font-size:25px !important;
  }


  .premium-stat small{
    font-size:9px !important;
  }


  .premium-stat-head > span{
    font-size:10px !important;
  }


  .stat-symbol{
    width:29px !important;
    height:29px !important;

    border-radius:9px !important;
  }


  /* ----- PROGRESS PANEL ----- */

  .premium-progress-panel,
  .panel{
    width:100% !important;

    min-width:0 !important;

    padding:
      15px !important;

    border-radius:18px !important;
  }


  .premium-progress-head,
  .panel-head{
    display:block !important;
  }


  .premium-progress-head h2{
    margin:
      4px 0 !important;

    font-size:17px !important;
  }


  .premium-progress-head p{
    margin:0 !important;

    font-size:10px !important;
  }


  .period-indicator{
    display:none !important;
  }


  /* accordion header */

  .level-progress-summary{
    padding:
      12px !important;

    gap:8px !important;
  }


  .level-letter{
    width:34px !important;
    height:34px !important;

    flex:0 0 34px !important;
  }


  .level-progress-name{
    min-width:0 !important;

    gap:10px !important;
  }


  .level-progress-name strong{
    font-size:11px !important;
  }


  .level-progress-name small{
    font-size:8.5px !important;
  }


  .level-progress-meta{
    margin-left:auto !important;

    gap:5px !important;
  }


  .level-progress-bar{
    display:none !important;
  }


  .level-progress-meta > strong{
    min-width:auto !important;

    font-size:10px !important;
  }


  /* table tetap scroll horizontal,
     tidak merusak lebar halaman */

  .level-progress-body{
    width:100% !important;

    overflow:hidden !important;
  }


  .level-progress-body .table-wrap{
    width:100% !important;

    overflow-x:auto !important;

    -webkit-overflow-scrolling:
      touch !important;
  }


  /* footer */

  .app-footer{
    width:100% !important;

    padding:
      4px 16px 22px !important;

    text-align:center !important;

    font-size:9px !important;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:480px){

  .premium-content,
  .content{
    padding:
      13px !important;
  }


  .dashboard-hero{
    padding:
      16px !important;

    border-radius:18px !important;
  }


  .dashboard-brand-logo{
    width:52px !important;
    min-width:52px !important;
    max-width:52px !important;

    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;

    flex-basis:52px !important;
  }


  .dashboard-hero h2{
    font-size:17px !important;
  }


  .dashboard-period-box{
    margin-top:13px !important;
  }


  .premium-stats-grid,
  .stats-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}


/* =========================================================
   VERY SMALL
   ========================================================= */

@media(max-width:350px){

  .premium-stats-grid,
  .stats-grid{
    grid-template-columns:
      1fr !important;
  }

}


/* =========================================================
   RAPOR MADIN NURUL HIDAYAH
   DATA SANTRI V1
   ========================================================= */

.students-v2{
  display:grid;
  gap:16px;
}


.students-page-head,
.student-edit-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}


.students-page-head h2,
.student-edit-head h2{
  margin:4px 0 4px;
  color:#17344d;
  font-size:27px;
}


.students-page-head p,
.student-edit-head p{
  margin:0;
  color:#7b8995;
  font-size:13px;
}


.student-add-box{
  position:relative;
}


.student-add-box>summary{
  list-style:none;
}


.student-add-box>summary::-webkit-details-marker{
  display:none;
}


.student-form-card{
  position:absolute;
  z-index:100;

  top:48px;
  right:0;

  width:min(860px,calc(100vw - 330px));

  padding:24px;

  border:1px solid #e2e9ef;
  border-radius:20px;

  background:#fff;

  box-shadow:
    0 28px 70px
    rgba(11,43,67,.20);
}


.student-form-title{
  margin-bottom:18px;
}


.student-form-title h3{
  margin:0 0 5px;
  color:#17344d;
}


.student-form-title p{
  margin:0;
  color:#81909c;
  font-size:12px;
}


.student-form-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:14px 16px;
}


.student-form-grid label{
  display:grid;
  gap:6px;

  color:#455766;

  font-size:11px;
  font-weight:800;
}


.student-form-grid .span-2{
  grid-column:1 / -1;
}


.student-form-section{
  grid-column:1 / -1;

  margin-top:8px;
  padding-bottom:8px;

  border-bottom:1px solid #e8edf1;

  color:#188b88;

  font-size:10px;
  font-weight:900;

  letter-spacing:.11em;
  text-transform:uppercase;
}


.student-form-grid input,
.student-form-grid select,
.student-form-grid textarea{
  width:100%;

  border:1px solid #d4dfe7;
  border-radius:11px;

  background:#fff;

  color:#17344d;

  font:inherit;
  font-weight:500;
}


.student-form-grid input,
.student-form-grid select{
  min-height:43px;
  padding:0 12px;
}


.student-form-grid textarea{
  min-height:70px;
  padding:10px 12px;
  resize:vertical;
}


.student-form-actions{
  grid-column:1 / -1;

  display:flex;
  justify-content:flex-end;
  gap:8px;

  padding-top:8px;
}


.student-summary-grid{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:10px;
}


.student-summary-card{
  padding:15px 17px;

  border:1px solid #e5ebf0;
  border-radius:15px;

  background:#fff;
}


.student-summary-card span{
  display:block;

  color:#7e8b97;

  font-size:10px;
  font-weight:700;
}


.student-summary-card strong{
  display:block;

  margin-top:4px;

  color:#17405e;

  font-size:23px;
}


.student-filter{
  display:grid;
  grid-template-columns:
    minmax(220px,2fr)
    repeat(3,minmax(130px,1fr))
    auto;

  gap:10px;

  align-items:end;
}


.student-filter label{
  display:grid;
  gap:5px;

  color:#536473;

  font-size:10px;
  font-weight:800;
}


.student-filter input,
.student-filter select{
  min-height:42px;

  padding:0 11px;

  border:1px solid #d6e0e7;
  border-radius:10px;

  background:#fff;
}


.student-filter-actions{
  display:flex;
  gap:6px;
}


.student-table td{
  vertical-align:middle;
}


.student-subtext,
.student-arabic{
  display:block;

  margin-top:3px;

  color:#8a97a1;

  font-size:9px;
}


.student-arabic{
  font-size:12px;
}


.student-actions{
  display:flex;
  gap:5px;
  white-space:nowrap;
}


.student-actions form{
  margin:0;
}


@media(max-width:899px){

  .students-page-head,
  .student-edit-head{
    display:block;
  }


  .student-add-box{
    margin-top:12px;
  }


  .student-add-box>summary{
    width:100%;
    text-align:center;
  }


  .student-form-card{
    position:fixed;

    z-index:1500;

    top:10px;
    left:10px;
    right:10px;
    bottom:10px;

    width:auto;

    overflow-y:auto;

    border-radius:18px;
  }


  .student-summary-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .student-filter{
    grid-template-columns:1fr 1fr;
  }


  .student-search{
    grid-column:1 / -1;
  }


  .student-filter-actions{
    grid-column:1 / -1;
  }


  .student-form-grid{
    grid-template-columns:1fr;
  }


  .student-form-grid .span-2,
  .student-form-section,
  .student-form-actions{
    grid-column:auto;
  }

}


@media(max-width:480px){

  .student-summary-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .student-filter{
    grid-template-columns:1fr;
  }


  .student-search,
  .student-filter-actions{
    grid-column:auto;
  }


  .student-filter-actions .btn{
    flex:1;
  }


  .students-page-head h2,
  .student-edit-head h2{
    font-size:23px;
  }

}


/* =========================================================
   DATA SANTRI - IMPORT EXCEL V1
   ========================================================= */

.student-import-panel{
  overflow:hidden;

  border:
    1px solid #dfe8ee;

  border-radius:16px;

  background:#fff;
}


.student-import-panel>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;

  padding:15px 17px;

  cursor:pointer;

  list-style:none;
}


.student-import-panel>summary::-webkit-details-marker{
  display:none;
}


.student-import-panel>summary strong{
  display:block;

  color:#183a53;

  font-size:13px;
}


.student-import-panel>summary small{
  display:block;

  margin-top:3px;

  color:#83919c;

  font-size:10px;
}


.student-import-body{
  display:grid;
  grid-template-columns:
    minmax(220px,.8fr)
    minmax(360px,1.2fr);

  gap:20px;

  padding:18px;

  border-top:
    1px solid #edf1f4;

  background:#fbfcfd;
}


.student-import-info strong{
  color:#173c58;

  font-size:13px;
}


.student-import-info p{
  max-width:420px;

  margin:
    6px 0 13px;

  color:#73838f;

  font-size:11px;
  line-height:1.6;
}


.student-import-form{
  display:grid;

  grid-template-columns:
    1fr 1fr auto;

  gap:10px;

  align-items:end;
}


.student-import-form label{
  display:grid;

  gap:6px;

  color:#526574;

  font-size:10px;
  font-weight:800;
}


.student-import-form select,
.student-import-form input[type="file"]{
  width:100%;
  min-height:43px;

  padding:
    8px 10px;

  border:
    1px solid #d5e0e7;

  border-radius:10px;

  background:#fff;
}


.student-import-warning{
  grid-column:1 / -1;

  padding:
    10px 12px;

  border:
    1px solid #eadba8;

  border-radius:10px;

  color:#755f22;

  background:#fffaf0;

  font-size:10px;
  line-height:1.6;
}


@media(max-width:899px){

  .student-import-body{
    grid-template-columns:1fr;
  }


  .student-import-form{
    grid-template-columns:1fr;
  }


  .student-import-warning{
    grid-column:auto;
  }

}


@media(max-width:480px){

  .student-import-panel>summary{
    align-items:flex-start;
  }


  .student-import-panel>summary .btn{
    flex:0 0 auto;
  }

}


/* =========================================================
   GRADE EXCEL V1 CSS
   ========================================================= */

.grade-excel-panel{
  margin-bottom:16px;

  overflow:hidden;

  border:
    1px solid #dfe7ed;

  border-radius:16px;

  background:#fff;
}


.grade-excel-panel>summary{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:16px;

  padding:14px 16px;

  cursor:pointer;

  list-style:none;
}


.grade-excel-panel>summary::-webkit-details-marker{
  display:none;
}


.grade-excel-panel>summary strong{
  display:block;

  color:#173b55;

  font-size:13px;
}


.grade-excel-panel>summary small{
  display:block;

  margin-top:3px;

  color:#82909b;

  font-size:10px;
}


.grade-excel-body{
  display:grid;

  grid-template-columns:
    minmax(260px,.8fr)
    minmax(360px,1.2fr);

  gap:18px;

  padding:18px;

  border-top:
    1px solid #edf1f4;

  background:#fafcfd;
}


.grade-excel-info h3{
  margin:
    0 0 5px;

  color:#173b55;

  font-size:14px;
}


.grade-excel-info p{
  max-width:470px;

  margin:
    0 0 13px;

  color:#73838e;

  font-size:11px;

  line-height:1.6;
}


.grade-excel-import-form{
  display:grid;

  grid-template-columns:
    minmax(250px,1fr)
    auto;

  gap:10px;

  align-items:end;
}


.grade-excel-import-form label{
  display:grid;

  gap:6px;

  color:#536675;

  font-size:10px;
  font-weight:800;
}


.grade-excel-import-form input[type="file"]{
  width:100%;
  min-height:43px;

  padding:8px 10px;

  border:
    1px solid #d4dfe7;

  border-radius:10px;

  background:#fff;
}


.grade-excel-note{
  grid-column:1 / -1;

  padding:10px 12px;

  border:
    1px solid #dce8e7;

  border-radius:10px;

  background:#f5fbfa;

  color:#50696b;

  font-size:10px;

  line-height:1.6;
}


@media(max-width:800px){

  .grade-excel-body{
    grid-template-columns:1fr;
  }


  .grade-excel-import-form{
    grid-template-columns:1fr;
  }


  .grade-excel-note{
    grid-column:auto;
  }

}


/* =========================================================
   DKN REKAP NILAI V1 CSS
   ========================================================= */

.dkn-page{
  display:grid;
  gap:16px;
}


.dkn-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  padding:22px;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #163a5f,
      #176f7a
    );

  color:#fff;
}


.dkn-hero h2{
  margin:4px 0;
  color:#fff;
}


.dkn-hero p{
  margin:0;
  opacity:.82;
  font-size:11px;
}


.dkn-period{
  min-width:190px;

  padding:12px 15px;

  border:1px solid
    rgba(255,255,255,.18);

  border-radius:13px;

  background:
    rgba(255,255,255,.08);
}


.dkn-period span{
  display:block;

  font-size:9px;
  font-weight:800;

  letter-spacing:.09em;

  opacity:.75;
}


.dkn-period strong{
  display:block;

  margin-top:4px;

  font-size:14px;
}


.dkn-class-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:12px;
}


.dkn-class-card{
  display:grid;
  gap:11px;

  padding:17px;

  border:
    1px solid #e2e9ee;

  border-radius:16px;

  background:#fff;
}


.dkn-class-top{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  color:#7a8995;

  font-size:10px;
}


.dkn-class-top strong{
  color:#168c8c;
  font-size:16px;
}


.dkn-class-card h3{
  margin:0;

  color:#183b55;

  font-size:18px;
}


.dkn-class-meta{
  display:flex;
  gap:15px;

  color:#7a8893;

  font-size:10px;
}


.dkn-class-meta b{
  color:#173c57;
}


.dkn-progress{
  height:7px;

  overflow:hidden;

  border-radius:99px;

  background:#edf1f4;
}


.dkn-progress span{
  display:block;

  height:100%;

  border-radius:99px;

  background:
    linear-gradient(
      90deg,
      #168c8c,
      #d8ad4a
    );
}


.dkn-class-card>small{
  color:#8a969f;
  font-size:9px;
}


.dkn-toolbar{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;
}


.dkn-toolbar-actions{
  display:flex;
  gap:7px;
}


.dkn-print-sheet{
  padding:18px;

  border:
    1px solid #dfe6eb;

  border-radius:16px;

  background:#fff;
}


.dkn-title{
  text-align:center;

  margin-bottom:14px;
}


.dkn-title h2{
  margin:0;

  color:#152f45;

  font-size:18px;

  letter-spacing:.03em;
}


.dkn-title p{
  margin:4px 0 0;

  color:#526473;

  font-size:11px;
  font-weight:800;
}


.dkn-identity{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  margin-bottom:12px;

  border:
    1px solid #dce4e9;

  border-radius:10px;

  overflow:hidden;
}


.dkn-identity>div{
  padding:9px 11px;

  border-right:
    1px solid #e3e9ed;
}


.dkn-identity>div:last-child{
  border-right:0;
}


.dkn-identity span{
  display:block;

  color:#85919b;

  font-size:8px;
  font-weight:800;

  text-transform:uppercase;
}


.dkn-identity strong{
  display:block;

  margin-top:3px;

  color:#173a54;

  font-size:11px;
}


.dkn-summary{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:8px;

  margin-bottom:12px;
}


.dkn-summary>div{
  padding:10px 12px;

  border:
    1px solid #e3e9ed;

  border-radius:10px;

  background:#fafcfd;
}


.dkn-summary span{
  display:block;

  color:#87939d;

  font-size:8px;
}


.dkn-summary strong{
  display:block;

  margin-top:2px;

  color:#173b55;

  font-size:15px;
}


.dkn-table-wrap{
  width:100%;
  overflow:auto;
}


.dkn-table{
  width:100%;

  border-collapse:collapse;

  white-space:nowrap;

  font-size:9px;
}


.dkn-table th,
.dkn-table td{
  padding:7px 6px;

  border:
    1px solid #cfd8de;

  text-align:center;
}


.dkn-table thead th{
  background:#f2f6f8;

  color:#29485d;

  font-weight:800;
}


.dkn-table .dkn-no{
  min-width:35px;
}


.dkn-table .dkn-induk{
  min-width:155px;
}


.dkn-table .dkn-name{
  min-width:170px;
  text-align:left;
}


.dkn-table td.dkn-name{
  background:#fff;
}


.dkn-mapel-group{
  letter-spacing:.05em;
}


.dkn-subject{
  min-width:70px;
  max-width:90px;
}


.dkn-subject-number{
  display:block;

  color:#168c8c;

  font-size:12px;
}


.dkn-subject small{
  display:block;

  margin-top:2px;

  overflow:hidden;

  max-width:80px;

  text-overflow:ellipsis;

  color:#697b88;

  font-size:7px;
}


.dkn-score{
  font-weight:700;
  color:#173b55;
}


.dkn-score.empty-score{
  color:#a8b1b8;
  background:#fafafa;
}


.dkn-total,
.dkn-average{
  font-weight:800;
}


.dkn-rank strong{
  display:inline-grid;

  place-items:center;

  width:24px;
  height:24px;

  border-radius:50%;

  background:#edf7f6;

  color:#147f7d;
}


.dkn-legend{
  margin-top:12px;

  padding-top:10px;

  border-top:
    1px solid #e4e9ed;

  color:#647582;

  font-size:8px;
}


.dkn-legend>div{
  display:flex;
  flex-wrap:wrap;

  gap:5px 14px;

  margin-top:5px;
}


.dkn-legend span{
  white-space:nowrap;
}


.dkn-note{
  margin-top:10px;

  padding:9px 11px;

  border-radius:9px;

  background:#f5faf9;

  color:#5b716f;

  font-size:9px;
}


@media(max-width:950px){

  .dkn-class-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:700px){

  .dkn-hero{
    display:block;
  }


  .dkn-period{
    margin-top:14px;
  }


  .dkn-class-grid{
    grid-template-columns:1fr;
  }


  .dkn-toolbar{
    display:block;
  }


  .dkn-toolbar-actions{
    margin-top:8px;

    flex-wrap:wrap;
  }


  .dkn-identity{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .dkn-summary{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* PRINT DKN */

@media print{

  @page{
    size:A4 landscape;
    margin:7mm;
  }


  body{
    background:#fff !important;
  }


  .sidebar,
  .topbar,
  .no-print,
  .alert{
    display:none !important;
  }


  .app-shell,
  .main,
  .content{
    display:block !important;

    width:100% !important;

    margin:0 !important;

    padding:0 !important;
  }


  .dkn-page{
    display:block;
  }


  .dkn-print-sheet{
    padding:0;

    border:0;

    border-radius:0;
  }


  .dkn-title{
    margin-bottom:8px;
  }


  .dkn-title h2{
    font-size:14px;
  }


  .dkn-title p{
    font-size:9px;
  }


  .dkn-identity{
    margin-bottom:7px;
  }


  .dkn-identity>div{
    padding:5px 7px;
  }


  .dkn-table-wrap{
    overflow:visible;
  }


  .dkn-table{
    width:100%;

    table-layout:auto;

    font-size:6.5px;
  }


  .dkn-table th,
  .dkn-table td{
    padding:3px 2px;

    border:
      1px solid #555;
  }


  .dkn-table .dkn-induk{
    min-width:auto;
  }


  .dkn-table .dkn-name{
    min-width:100px;
  }


  .dkn-subject{
    min-width:auto;
  }


  .dkn-subject small{
    max-width:55px;

    font-size:5.5px;
  }


  .dkn-subject-number{
    font-size:7px;
  }


  .dkn-rank strong{
    width:auto;
    height:auto;

    background:none;

    color:#000;
  }


  .dkn-legend{
    margin-top:6px;

    padding-top:5px;

    font-size:6px;
  }

}


/* =========================================================
   MAPEL DELETE V1
   ========================================================= */

.inline-delete-form{
  display:inline-block;
  margin:0;
}


.btn-danger-soft{
  border:
    1px solid #efd4d4 !important;

  background:
    #fff5f5 !important;

  color:
    #b64242 !important;
}


.btn-danger-soft:hover{
  border-color:
    #e4baba !important;

  background:
    #fdeaea !important;
}


.subject-delete-lock{
  display:inline-block;

  color:#919da6;

  font-size:9px;

  line-height:1.3;
}


.subject-master-table td{
  vertical-align:middle;
}


@media(max-width:700px){

  .subject-master-table{
    min-width:760px;
  }

}


/* =========================================================
   GRADE GROUP ABC V1
   ========================================================= */

.grade-group-legend{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:8px;

  margin-bottom:12px;
}


.grade-group-legend-item{
  display:flex;

  align-items:center;

  gap:9px;

  padding:10px 12px;

  border:
    1px solid #e1e8ed;

  border-radius:11px;

  background:#fafcfd;
}


.grade-group-code{
  display:grid;

  place-items:center;

  flex:0 0 auto;

  width:29px;
  height:29px;

  border-radius:8px;

  background:#163a5f;

  color:#fff;

  font-size:13px;
  font-weight:900;
}


.grade-group-legend-item strong{
  display:block;

  color:#1e4058;

  font-size:10px;
}


.grade-group-legend-item small{
  display:block;

  margin-top:2px;

  color:#667983;

  font-size:13px;
}


.grade-matrix-v2{
  border-collapse:collapse;

  min-width:max-content;
}


.grade-matrix-v2 th,
.grade-matrix-v2 td{
  border:
    1px solid #d8e0e5;
}


.grade-student-col{
  min-width:190px;

  position:sticky;

  left:0;

  z-index:8;

  background:#f3f6f8 !important;
}


.grade-group-head{
  padding:8px 10px !important;

  text-align:center;

  color:#fff !important;

  background:#176f78 !important;

  white-space:nowrap;
}


.grade-group-head small{
  display:block;

  margin-top:2px;

  color:#fff;

  font-size:13px;

  opacity:.92;
}


.grade-group-letter{
  display:inline-grid;

  place-items:center;

  width:21px;
  height:21px;

  margin-right:5px;

  border-radius:6px;

  background:
    rgba(255,255,255,.18);

  font-weight:900;
}


.grade-group-b{
  background:#1a657a !important;
}


.grade-group-c{
  background:#345c77 !important;
}


.grade-subject-head{
  min-width:105px;
  max-width:120px;

  padding:7px 5px !important;

  vertical-align:top;

  white-space:normal;

  background:#f5f7f8 !important;
}


.grade-subject-number{
  display:grid;

  place-items:center;

  width:20px;
  height:20px;

  margin:
    0 auto 4px;

  border-radius:50%;

  background:#e5eff1;

  color:#176f78;

  font-size:9px;
  font-weight:900;
}


.grade-subject-head strong{
  display:block;

  color:#29475b;

  font-size:9px;

  line-height:1.25;
}


.grade-subject-head small{
  display:block;

  margin-top:4px;

  color:#566e7c;

  font-size:12px;

  line-height:1.2;
}


.grade-student-name{
  position:sticky;

  left:0;

  z-index:5;

  min-width:190px;

  padding:7px 9px !important;

  background:#fff;
}


.grade-student-name strong{
  display:block;

  color:#193b53;

  font-size:10px;
}


.grade-student-name small{
  display:block;

  margin-top:2px;

  color:#8a969e;

  font-size:8px;
}


.grade-score-cell{
  padding:4px !important;

  text-align:center;
}


.grade-score-cell input{
  width:58px;
  height:35px;

  padding:4px;

  border:
    1px solid #d3dde3;

  border-radius:7px;

  text-align:center;

  font-size:11px;
  font-weight:700;
}


.grade-score-cell input:focus{
  outline:none;

  border-color:#168c8c;

  box-shadow:
    0 0 0 2px
    rgba(22,140,140,.10);
}


@media(max-width:700px){

  .grade-group-legend{
    grid-template-columns:1fr;
  }


  .grade-student-col,
  .grade-student-name{
    min-width:140px;
  }


  .grade-subject-head{
    min-width:85px;
  }

}


/* =========================================================
   SUBJECT FLEXIBLE MAPPING V2
   ========================================================= */

.subjects-flex-page{
  display:grid;
  gap:16px;
}


.subject-flex-hero{
  padding:19px 21px;

  border-radius:17px;

  background:
    linear-gradient(
      135deg,
      #163a5f,
      #176f78
    );

  color:#fff;
}


.subject-flex-hero h2{
  margin:4px 0;

  color:#fff;
}


.subject-flex-hero p{
  margin:0;

  opacity:.8;

  font-size:11px;
}


.subject-master-add{
  overflow:hidden;

  border:
    1px solid #dfe7ec;

  border-radius:15px;

  background:#fff;
}


.subject-master-add>summary{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:14px 16px;

  cursor:pointer;

  list-style:none;
}


.subject-master-add>summary::-webkit-details-marker{
  display:none;
}


.subject-master-add>summary strong{
  display:block;

  color:#173c56;

  font-size:12px;
}


.subject-master-add>summary small{
  display:block;

  margin-top:2px;

  color:#85929c;

  font-size:9px;
}


.subject-add-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:11px;

  padding:17px;

  border-top:
    1px solid #edf1f3;

  background:#fafcfd;
}


.subject-add-grid label,
.subject-class-selector label{
  display:grid;

  gap:5px;

  color:#526473;

  font-size:10px;
  font-weight:800;
}


.subject-add-grid input,
.subject-add-grid select,
.subject-class-selector select{
  min-height:42px;

  width:100%;

  padding:0 11px;

  border:
    1px solid #d5e0e7;

  border-radius:10px;

  background:#fff;
}


.subject-add-action{
  grid-column:1 / -1;

  text-align:right;
}


.subject-class-selector{
  max-width:420px;

  margin-bottom:14px;
}


.subject-selected-class{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-bottom:13px;

  padding:11px 13px;

  border:
    1px solid #dce9e7;

  border-radius:11px;

  background:#f6fbfa;
}


.subject-selected-class span{
  color:#7b8d8b;

  font-size:8px;
  font-weight:900;

  letter-spacing:.1em;
}


.subject-selected-class strong{
  color:#167d7c;

  font-size:12px;
}


.subject-bulk-toolbar{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-bottom:12px;

  color:#61727e;

  font-size:10px;
}


.subject-bulk-buttons{
  display:flex;
  gap:6px;
}


.subject-category-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:11px;
}


.subject-category-card{
  overflow:hidden;

  border:
    1px solid #dfe7ec;

  border-radius:13px;

  background:#fff;
}


.subject-category-head{
  display:flex;

  align-items:center;

  gap:9px;

  padding:11px 12px;

  background:#f5f8fa;
}


.subject-category-code{
  display:grid;

  place-items:center;

  flex:0 0 auto;

  width:29px;
  height:29px;

  border-radius:8px;

  background:#176f78;

  color:#fff;

  font-size:13px;
  font-weight:900;
}


.subject-category-head strong{
  display:block;

  color:#26485e;

  font-size:10px;
}


.subject-category-head small{
  display:block;

  margin-top:2px;

  color:#5b7481;

  font-size:13px;
}


.subject-check-list{
  padding:7px;
}


.subject-check-item{
  display:flex;

  align-items:center;

  gap:8px;

  padding:8px;

  margin-bottom:4px;

  border:
    1px solid transparent;

  border-radius:9px;

  cursor:pointer;

  transition:.15s ease;
}


.subject-check-item:hover{
  background:#f8fafb;
}


.subject-check-item.is-selected{
  border-color:#cfe3e1;

  background:#f3faf9;
}


.subject-check-item input{
  flex:0 0 auto;

  width:16px;
  height:16px;

  accent-color:#168c8c;
}


.subject-check-number{
  display:grid;

  place-items:center;

  flex:0 0 auto;

  width:22px;
  height:22px;

  border-radius:50%;

  background:#edf2f4;

  color:#60737f;

  font-size:9px;
  font-weight:900;
}


.subject-check-item.is-selected
.subject-check-number{
  background:#168c8c;

  color:#fff;
}


.subject-check-name{
  min-width:0;
}


.subject-check-name strong{
  display:block;

  color:#29485b;

  font-size:10px;
}


.subject-check-name small{
  display:block;

  margin-top:2px;

  color:#758791;

  font-size:12px;
}


.subject-category-empty{
  padding:15px;
}


.subject-save-bar{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:15px;

  margin-top:13px;

  padding:12px 14px;

  border:
    1px solid #dde7eb;

  border-radius:11px;

  background:#fafcfd;
}


.subject-save-bar strong{
  display:block;

  color:#183d56;

  font-size:11px;
}


.subject-save-bar small{
  display:block;

  margin-top:2px;

  color:#86949e;

  font-size:8px;
}


@media(max-width:950px){

  .subject-category-grid{
    grid-template-columns:1fr;
  }


  .subject-add-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:600px){

  .subject-add-grid{
    grid-template-columns:1fr;
  }


  .subject-add-action{
    grid-column:auto;
  }


  .subject-bulk-toolbar,
  .subject-save-bar,
  .subject-selected-class{
    display:block;
  }


  .subject-bulk-buttons{
    margin-top:8px;
  }


  .subject-save-bar .btn{
    width:100%;

    margin-top:10px;
  }

}


/* =========================================================
   SUBJECT MONITORING V3
   Model Monitoring Akademik Dashboard
   ========================================================= */

.subject-monitor-panel{
  overflow:hidden;
}


.subject-monitor-levels{
  display:grid;

  gap:9px;
}


.subject-monitor-level{
  overflow:hidden;

  border:
    1px solid #e0e7ec;

  border-radius:14px;

  background:#fff;
}


.subject-monitor-level>summary{
  list-style:none;
}


.subject-monitor-level>summary::-webkit-details-marker{
  display:none;
}


.subject-monitor-level-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:14px;

  padding:13px 15px;

  cursor:pointer;

  background:#f8fafb;
}


.subject-monitor-level[open]
.subject-monitor-level-head{
  border-bottom:
    1px solid #e4eaee;

  background:#f4f8f9;
}


.subject-monitor-level-title{
  display:flex;

  align-items:center;

  gap:10px;
}


.subject-monitor-chevron{
  display:grid;

  place-items:center;

  width:27px;
  height:27px;

  border-radius:8px;

  background:#e7eff2;

  color:#49687a;

  font-size:20px;

  line-height:1;

  transition:
    transform .18s ease;
}


.subject-monitor-level[open]
.subject-monitor-chevron{
  transform:
    rotate(90deg);

  background:#168c8c;

  color:#fff;
}


.subject-monitor-level-title strong{
  display:block;

  color:#193c55;

  font-size:12px;
}


.subject-monitor-level-title small{
  display:block;

  margin-top:2px;

  color:#85929b;

  font-size:8px;
}


.subject-monitor-level-count{
  display:grid;

  place-items:center;

  min-width:35px;
  height:27px;

  padding:0 9px;

  border-radius:99px;

  background:#eaf5f4;

  color:#167d7b;

  font-size:10px;
  font-weight:900;
}


.subject-monitor-classes{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:9px;

  padding:11px;
}


.subject-monitor-class{
  overflow:hidden;

  border:
    1px solid #e3e9ed;

  border-radius:12px;

  background:#fff;
}


.subject-monitor-class.is-current{
  border-color:#bddbd8;

  box-shadow:
    0 0 0 2px
    rgba(22,140,140,.05);
}


.subject-monitor-class>summary{
  list-style:none;
}


.subject-monitor-class>summary::-webkit-details-marker{
  display:none;
}


.subject-monitor-class-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  padding:11px 12px;

  cursor:pointer;
}


.subject-monitor-class[open]
.subject-monitor-class-head{
  border-bottom:
    1px solid #e8edef;

  background:#fbfcfd;
}


.subject-monitor-class-label{
  display:block;

  color:#97a2aa;

  font-size:7px;
  font-weight:900;

  letter-spacing:.1em;
}


.subject-monitor-class-head strong{
  display:block;

  margin-top:2px;

  color:#173b55;

  font-size:13px;
}


.subject-monitor-class-stats{
  display:flex;

  align-items:center;

  gap:9px;
}


.subject-monitor-class-stats>span:first-child{
  color:#778792;

  font-size:9px;
}


.subject-monitor-class-stats b{
  color:#168c8c;

  font-size:12px;
}


.subject-monitor-open-icon{
  display:grid;

  place-items:center;

  width:23px;
  height:23px;

  border-radius:50%;

  background:#edf2f4;

  color:#5d7481;

  font-size:15px;
  font-weight:400;

  transition:
    transform .18s ease;
}


.subject-monitor-class[open]
.subject-monitor-open-icon{
  transform:
    rotate(45deg);

  background:#168c8c;

  color:#fff;
}


.subject-monitor-class-body{
  padding:10px;
}


.subject-monitor-mini-summary{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:5px;

  margin-bottom:9px;
}


.subject-monitor-mini-summary span{
  display:grid;

  grid-template-columns:
    auto auto;

  align-items:center;

  justify-content:start;

  gap:3px 6px;

  padding:7px;

  border-radius:8px;

  background:#f6f8f9;

  color:#82909a;

  font-size:7px;
}


.subject-monitor-mini-summary b{
  grid-row:
    1 / span 2;

  display:grid;

  place-items:center;

  width:21px;
  height:21px;

  border-radius:6px;

  background:#163a5f;

  color:#fff;

  font-size:9px;
}


.subject-monitor-mini-summary strong{
  color:#24465b;

  font-size:11px;
}


.subject-monitor-groups{
  display:grid;

  gap:7px;
}


.subject-monitor-group{
  overflow:hidden;

  border:
    1px solid #e4eaee;

  border-radius:9px;
}


.subject-monitor-group-head{
  display:flex;

  align-items:center;

  gap:8px;

  padding:7px 9px;

  background:#f6f9fa;
}


.subject-monitor-group-head>span{
  display:grid;

  place-items:center;

  width:23px;
  height:23px;

  border-radius:6px;

  background:#176f78;

  color:#fff;

  font-size:10px;
  font-weight:900;
}


.subject-monitor-group-head strong{
  display:block;

  color:#29495d;

  font-size:8px;
}


.subject-monitor-group-head small{
  display:block;

  margin-top:1px;

  color:#6e818c;

  font-size:11px;
}


.subject-monitor-list{
  padding:5px 7px;
}


.subject-monitor-list>div{
  display:grid;

  grid-template-columns:
    20px
    minmax(0,1fr)
    minmax(80px,.7fr);

  align-items:center;

  gap:6px;

  min-height:29px;

  border-bottom:
    1px dashed #e7ecef;
}


.subject-monitor-list>div:last-child{
  border-bottom:0;
}


.subject-monitor-list>div>span{
  display:grid;

  place-items:center;

  width:18px;
  height:18px;

  border-radius:50%;

  background:#edf2f4;

  color:#657986;

  font-size:7px;
  font-weight:900;
}


.subject-monitor-list strong{
  color:#314e61;

  font-size:8px;
}


.subject-monitor-list small{
  color:#71858f;

  font-size:10px;

  text-align:right;
}


.subject-monitor-action{
  display:flex;

  justify-content:flex-end;

  margin-top:9px;
}


.subject-monitor-empty{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  padding:10px;

  border:
    1px dashed #d9e2e7;

  border-radius:9px;

  color:#8a979f;

  font-size:9px;
}


@media(max-width:850px){

  .subject-monitor-classes{
    grid-template-columns:1fr;
  }

}


@media(max-width:480px){

  .subject-monitor-class-body{
    padding:8px;
  }


  .subject-monitor-mini-summary{
    grid-template-columns:1fr;
  }


  .subject-monitor-list>div{
    grid-template-columns:
      18px
      minmax(0,1fr);
  }


  .subject-monitor-list small{
    grid-column:2;

    text-align:left;
  }

}


/* =========================================================
   RAPOR IMDA F4 UI V1
   ========================================================= */

.report-select-page,
.report-class-page,
.report-preview-page{
  display:grid;
  gap:16px;
}


/* SELECT */

.report-select-hero{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:18px;

  padding:21px;

  border-radius:18px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #163a5f,
      #176f78
    );
}


.report-select-hero h2{
  margin:4px 0;

  color:#fff;
}


.report-select-hero p{
  margin:0;

  opacity:.82;

  font-size:10px;
}


.report-period-card{
  min-width:205px;

  padding:11px 14px;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius:12px;

  background:
    rgba(255,255,255,.08);
}


.report-period-card span{
  display:block;

  opacity:.72;

  font-size:8px;
  font-weight:900;

  letter-spacing:.08em;
}


.report-period-card strong{
  display:block;

  margin-top:3px;

  font-size:13px;
}


.report-class-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:11px;
}


.report-class-card{
  display:grid;

  gap:10px;

  padding:16px;

  border:
    1px solid #e1e8ed;

  border-radius:15px;

  background:#fff;
}


.report-class-card-top{
  display:flex;

  align-items:center;
  justify-content:space-between;

  color:#80909a;

  font-size:9px;
}


.report-class-card-top strong{
  color:#168c8c;

  font-size:15px;
}


.report-class-card h3{
  margin:0;

  color:#183c56;

  font-size:17px;
}


.report-class-stats{
  display:flex;

  gap:13px;

  color:#7e8c96;

  font-size:9px;
}


.report-class-stats b{
  color:#193e58;
}


.report-progress{
  height:6px;

  overflow:hidden;

  border-radius:99px;

  background:#edf1f4;
}


.report-progress span{
  display:block;

  height:100%;

  border-radius:99px;

  background:
    linear-gradient(
      90deg,
      #168c8c,
      #d8ad4a
    );
}


.report-class-card small{
  color:#8d99a1;

  font-size:8px;
}


/* CLASS */

.report-period-actions{
  display:flex;

  align-items:center;

  gap:6px;

  flex-wrap:wrap;
}


.report-row-actions{
  display:flex;

  gap:5px;

  flex-wrap:wrap;
}


.report-inline-progress{
  min-width:90px;
}


.report-inline-progress>strong{
  display:block;

  margin-bottom:4px;

  color:#375365;

  font-size:9px;
}


.report-inline-progress>div{
  width:90px;
  height:4px;

  overflow:hidden;

  border-radius:99px;

  background:#edf1f3;
}


.report-inline-progress>div>span{
  display:block;

  height:100%;

  border-radius:99px;

  background:#168c8c;
}


/* TOOLBAR */

.report-preview-toolbar{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;
}


.report-preview-toolbar>div{
  display:flex;

  gap:6px;

  flex-wrap:wrap;
}


.report-warning{
  padding:10px 12px;

  border:
    1px solid #eadca8;

  border-radius:10px;

  background:#fffbef;

  color:#725f25;

  font-size:10px;
}


/* =========================================================
   F4 SHEET
   ========================================================= */

.nurul-report-sheet{
  box-sizing:border-box;

  width:210mm;
  min-height:330mm;

  margin:
    0 auto;

  padding:
    9mm 10mm 8mm;

  border:
    1px solid #dce3e8;

  background:#fff;

  color:#111;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  box-shadow:
    0 14px 36px
    rgba(15,45,64,.10);
}


.nurul-arabic{
  direction:rtl;

  font-family:
    "Traditional Arabic",
    "Noto Naskh Arabic",
    "Amiri",
    serif;
}


.nurul-center{
  text-align:center;
}


/* HEADER */

.nurul-report-header{
  display:grid;

  grid-template-columns:
    25mm
    1fr
    25mm;

  align-items:center;

  min-height:29mm;
}


.nurul-report-logo{
  display:flex;

  align-items:center;
  justify-content:center;
}


.nurul-report-logo img{
  display:block;

  max-width:22mm;
  max-height:22mm;

  object-fit:contain;
}


.nurul-report-heading{
  text-align:center;
}


.nurul-pondok-name{
  font-size:12pt;
  font-weight:800;
}


.nurul-madrasah-name{
  margin-top:2px;

  font-size:13pt;
  font-weight:900;
}


.nurul-location{
  margin-top:2px;

  font-size:9pt;
  font-weight:700;
}


.nurul-address{
  margin-top:1px;

  font-size:8pt;
}


.nurul-header-line{
  height:2px;

  margin-top:1.5mm;

  border-top:
    2px solid #111;

  border-bottom:
    1px solid #111;
}


.nurul-report-title{
  margin:
    5mm 0 4mm;

  text-align:center;

  font-size:12pt;

  letter-spacing:.03em;
}


/* IDENTITAS */

.nurul-report-identity{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  column-gap:10mm;
  row-gap:1.5mm;

  margin-bottom:4mm;

  font-size:9pt;
}


.nurul-report-identity>div{
  display:grid;

  grid-template-columns:
    30mm
    4mm
    1fr;

  align-items:start;
}


.nurul-report-identity strong{
  font-weight:700;
}


/* TABLE NILAI */

.nurul-score-table{
  width:100%;

  border-collapse:collapse;

  table-layout:fixed;

  font-size:7.5pt;
}


.nurul-score-table th,
.nurul-score-table td{
  padding:
    1.15mm 1.2mm;

  border:
    .6px solid #111;

  vertical-align:middle;
}


.nurul-score-table th{
  text-align:center;

  font-weight:800;

  background:#f6f6f6;
}


.nurul-score-table .nurul-no{
  width:8mm;

  text-align:center;
}


.nurul-score-table .nurul-mapel-id{
  width:34mm;
}


.nurul-score-table .nurul-score{
  width:11mm;

  text-align:center;
}


.nurul-score-table .nurul-words{
  width:29mm;

  text-align:center;

  line-height:1.15;
}


.nurul-score-table .nurul-mapel-ar{
  width:30mm;

  text-align:right;

  font-size:9.5pt;
}


.nurul-group-row td{
  padding:
    1.3mm;

  background:#f1f1f1;

  font-weight:800;
}


.nurul-group-row td:first-child{
  text-align:center;
}


.nurul-summary-row td{
  background:#fafafa;

  font-weight:700;

  text-align:center;
}


/* SIKAP ABSENSI */

.nurul-support-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:4mm;

  margin-top:3mm;
}


.nurul-support-table{
  width:100%;

  border-collapse:collapse;

  font-size:7.7pt;
}


.nurul-support-table th,
.nurul-support-table td{
  padding:
    1.2mm 1.5mm;

  border:
    .6px solid #111;
}


.nurul-support-table th{
  text-align:center;

  background:#f5f5f5;
}


/* CATATAN */

.nurul-report-note{
  margin-top:3mm;

  border:
    .6px solid #111;
}


.nurul-report-note>strong{
  display:block;

  padding:
    1.3mm 2mm;

  border-bottom:
    .6px solid #111;

  background:#f5f5f5;

  font-size:7.8pt;
}


.nurul-report-note>div{
  min-height:11mm;

  padding:2mm;

  font-size:8pt;

  line-height:1.35;
}


/* ISSUE */

.nurul-issued{
  width:68mm;

  margin:
    4mm 0 0 auto;

  font-size:7.8pt;
}


.nurul-issued>div{
  display:grid;

  grid-template-columns:
    24mm 4mm 1fr;

  margin-bottom:1mm;
}


/* SIGNATURE */

.nurul-signatures{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:6mm;

  margin-top:3mm;

  text-align:center;

  font-size:7.8pt;
}


.nurul-signatures>div{
  min-height:28mm;

  display:flex;

  flex-direction:column;

  justify-content:space-between;
}


.nurul-signatures span{
  display:block;
}


.nurul-signatures strong{
  display:block;

  padding-top:16mm;

  font-size:8pt;

  text-decoration:underline;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){

  .report-class-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .nurul-report-sheet{
    width:100%;
    min-height:auto;

    padding:18px;

    overflow:auto;
  }

}


@media(max-width:650px){

  .report-select-hero{
    display:block;
  }


  .report-period-card{
    margin-top:12px;
  }


  .report-class-grid{
    grid-template-columns:1fr;
  }


  .report-preview-toolbar{
    display:block;
  }


  .report-preview-toolbar>div{
    margin-top:8px;
  }


  .nurul-report-identity{
    grid-template-columns:1fr;
  }


  .nurul-support-grid{
    grid-template-columns:1fr;
  }


  .nurul-score-table{
    min-width:760px;
  }

}


/* =========================================================
   PRINT F4 / FOLIO
   ========================================================= */

@media print{

  @page{
    size:
      210mm 330mm;

    margin:0;
  }


  html,
  body{
    width:210mm;

    margin:0 !important;
    padding:0 !important;

    background:#fff !important;
  }


  .sidebar,
  .topbar,
  .no-print,
  .alert,
  footer{
    display:none !important;
  }


  .app-shell,
  .main,
  .content{
    display:block !important;

    width:210mm !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;
  }


  .report-preview-page{
    display:block !important;

    margin:0 !important;
    padding:0 !important;
  }


  .nurul-report-sheet{
    width:210mm !important;
    min-height:330mm !important;

    margin:0 !important;

    padding:
      8mm 9mm 7mm !important;

    border:0 !important;

    box-shadow:none !important;

    page-break-after:always;

    print-color-adjust:exact;

    -webkit-print-color-adjust:exact;
  }


  .nurul-report-title{
    margin:
      3mm 0 !important;
  }


  .nurul-score-table{
    font-size:7pt;
  }


  .nurul-score-table th,
  .nurul-score-table td{
    padding:
      .85mm 1mm;
  }


  .nurul-support-table{
    font-size:7pt;
  }


  .nurul-report-note>div{
    min-height:9mm;
  }


  .nurul-signatures{
    margin-top:2.5mm;
  }

}


/* =========================================================
   RAPOR TABLE SINGLE SCORE V2
   ========================================================= */

.nurul-score-table-v2{
  table-layout:fixed;
}


.nurul-score-table-v2 th{
  padding:
    1.35mm 1mm;

  text-align:center;

  vertical-align:middle;
}


.nurul-score-table-v2 td{
  padding:
    1.15mm 1.2mm;

  vertical-align:middle;
}


.nurul-score-table-v2
.nurul-v2-no{
  width:8mm;
}


.nurul-score-table-v2
.nurul-v2-mapel{
  width:34mm;
}


.nurul-score-table-v2
.nurul-v2-mapel-ar{
  width:32mm;

  font-size:10pt;
}


.nurul-score-table-v2
.nurul-v2-score{
  width:15mm;
}


.nurul-score-table-v2
.nurul-v2-words{
  width:38mm;
}


.nurul-score-table-v2
.nurul-v2-words-ar{
  width:37mm;

  font-size:9pt;
}


.nurul-v2-score-value{
  font-size:9pt;

  font-weight:900;
}


.nurul-v2-terbilang{
  text-align:center;

  font-size:7.2pt;

  line-height:1.15;
}


.nurul-v2-terbilang-ar{
  text-align:center;

  font-size:9pt;

  line-height:1.15;
}


.nurul-v2-arabic-subject{
  text-align:right;

  font-size:9.5pt;

  line-height:1.15;
}


.nurul-group-row-v2 td{
  background:#f2f2f2;

  font-weight:800;
}


.nurul-group-row-v2 td:nth-child(1){
  text-align:center;
}


.nurul-group-row-v2 td:nth-child(2){
  text-align:left;
}


.nurul-group-row-v2 td:nth-child(3){
  text-align:right;

  font-size:9.5pt;
}


.nurul-summary-row-v2 td{
  text-align:center;

  font-weight:800;
}


@media print{

  .nurul-score-table-v2{
    font-size:7.2pt;
  }


  .nurul-score-table-v2 th{
    padding:
      .9mm .8mm;
  }


  .nurul-score-table-v2 td{
    padding:
      .8mm .9mm;
  }


  .nurul-v2-score-value{
    font-size:8.5pt;
  }


  .nurul-v2-terbilang{
    font-size:6.8pt;
  }


  .nurul-v2-terbilang-ar,
  .nurul-v2-arabic-subject{
    font-size:8.5pt;
  }

}


/* =========================================================
   RAPOR IDENTITAS + ABSENSI V3
   ========================================================= */

/*
 * Pastikan dua tabel selalu berada
 * di dalam lebar kertas.
 */

.nurul-support-grid{
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  width:100% !important;
  max-width:100% !important;

  box-sizing:border-box !important;

  gap:3mm !important;

  overflow:hidden !important;
}


.nurul-support-grid > *{
  min-width:0 !important;
  max-width:100% !important;

  box-sizing:border-box !important;
}


.nurul-support-table{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  table-layout:fixed !important;

  border-collapse:collapse !important;

  box-sizing:border-box !important;
}


.nurul-support-table th,
.nurul-support-table td{
  box-sizing:border-box !important;

  overflow:hidden;

  white-space:normal;

  word-break:normal;

  overflow-wrap:anywhere;
}


/*
 * Penilaian sikap:
 * No | Sikap | Kode | Predikat
 */

.nurul-support-grid
.nurul-support-table:first-child
td:nth-child(1){
  width:8%;
  text-align:center;
}


.nurul-support-grid
.nurul-support-table:first-child
td:nth-child(2){
  width:39%;
}


.nurul-support-grid
.nurul-support-table:first-child
td:nth-child(3){
  width:15%;
  text-align:center;
}


.nurul-support-grid
.nurul-support-table:first-child
td:nth-child(4){
  width:38%;
}


/*
 * Absensi:
 * Indonesia | jumlah | Arab | jumlah
 */

.nurul-support-grid
.nurul-support-table:nth-child(2)
td:nth-child(1){
  width:30%;
}


.nurul-support-grid
.nurul-support-table:nth-child(2)
td:nth-child(2){
  width:15%;
  text-align:center;
}


.nurul-support-grid
.nurul-support-table:nth-child(2)
td:nth-child(3){
  width:40%;
  text-align:right;
}


.nurul-support-grid
.nurul-support-table:nth-child(2)
td:nth-child(4){
  width:15%;
  text-align:center;
}


/*
 * Identitas dibuat sedikit lebih stabil.
 */

.nurul-report-identity{
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;
}


.nurul-report-identity > div{
  min-width:0;
}


.nurul-report-identity strong{
  overflow-wrap:anywhere;
}


@media print{

  .nurul-support-grid{
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    gap:3mm !important;

    width:100% !important;

    overflow:hidden !important;
  }


  .nurul-support-table{
    width:100% !important;
    max-width:100% !important;

    table-layout:fixed !important;

    font-size:7pt !important;
  }


  .nurul-support-table th,
  .nurul-support-table td{
    padding:
      .9mm 1mm !important;
  }

}


/* =========================================================
   LOGO KANAN NURUL HIDAYAH V1
   ========================================================= */

.nurul-report-logo-right{
  display:flex;
  align-items:center;
  justify-content:center;
}

.nurul-report-logo-right img{
  display:block;
  max-width:22mm;
  max-height:22mm;
  object-fit:contain;
}

@media print{
  .nurul-report-logo-right img{
    max-width:22mm !important;
    max-height:22mm !important;
    object-fit:contain !important;
  }
}


/* =========================================================
   REPORT SETTINGS DOCS CONTINUE V1
   ========================================================= */

.report-settings-page{
  display:grid;
  gap:16px;
}

.report-settings-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:19px 20px;
  border-radius:17px;
  background:linear-gradient(135deg,#163a5f,#176f78);
  color:#fff;
}

.report-settings-hero h2{
  margin:3px 0;
  color:#fff;
}

.report-settings-hero p{
  margin:0;
  font-size:10px;
  opacity:.8;
}

.report-settings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
}

.settings-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.settings-form-grid label{
  display:grid;
  gap:5px;
  font-size:9px;
  font-weight:800;
  color:#536877;
}

.settings-form-grid input,
.settings-class-item input{
  width:100%;
  min-height:40px;
  padding:0 10px;
  border:1px solid #d7e1e6;
  border-radius:9px;
  background:#fff;
  box-sizing:border-box;
}

.settings-span-2{
  grid-column:1/-1;
}

.settings-class-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.settings-class-item{
  display:grid;
  gap:7px;
  padding:11px;
  border:1px solid #e0e7eb;
  border-radius:11px;
  background:#fafcfd;
}

.settings-class-item small,
.settings-class-item strong{
  display:block;
}

.settings-class-item small{
  color:#87949c;
  font-size:7px;
}

.settings-class-item strong{
  color:#25475d;
  font-size:10px;
}

.report-settings-save{
  display:flex;
  justify-content:flex-end;
}

.batch-print-toolbar,
.document-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #dde5ea;
  border-radius:12px;
  background:#fff;
}

.report-batch,
.document-batch,
.document-preview-page{
  display:grid;
  gap:16px;
}

.report-document-sheet{
  width:210mm;
  min-height:330mm;
  margin:0 auto;
  padding:12mm;
  box-sizing:border-box;
  background:#fff;
  color:#111;
  border:1px solid #dce4e9;
  box-shadow:0 14px 35px rgba(20,46,64,.10);
}


/* COVER */

.report-cover-sheet{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:center;
  border:2px solid #183f59;
  outline:1px solid #d8ad4a;
  outline-offset:-7mm;
}

.report-cover-top{
  display:grid;
  grid-template-columns:25mm 1fr 25mm;
  align-items:center;
  gap:5mm;
  margin-top:5mm;
}

.report-cover-top img{
  display:block;
  max-width:22mm;
  max-height:22mm;
  margin:auto;
  object-fit:contain;
}

.report-cover-top strong,
.report-cover-top span{
  display:block;
}

.report-cover-top strong{
  font-size:13pt;
}

.report-cover-top span{
  margin-top:2mm;
  font-size:11pt;
}

.report-cover-main{
  margin:15mm 0;
}

.report-cover-arabic{
  display:block;
  margin-bottom:4mm;
  font-family:"Traditional Arabic","Amiri",serif;
  font-size:22pt;
}

.report-cover-main h1{
  margin:0;
  color:#173f5d;
  font-size:28pt;
}

.report-cover-main h2{
  margin:2mm 0 8mm;
  font-size:15pt;
}

.report-cover-logo-main{
  display:block;
  width:47mm;
  height:47mm;
  margin:0 auto 10mm;
  object-fit:contain;
}

.report-cover-student{
  width:120mm;
  margin:auto;
  padding:7mm;
  box-sizing:border-box;
  border:1px solid #173f5d;
  border-radius:5mm;
}

.report-cover-student small,
.report-cover-student strong{
  display:block;
}

.report-cover-student small{
  margin-top:4mm;
  color:#7b8b94;
  font-size:8pt;
}

.report-cover-student small:first-child{
  margin-top:0;
}

.report-cover-student strong{
  margin-top:1mm;
  font-size:15pt;
}

.report-cover-bottom{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:3mm;
}

.report-cover-bottom>div{
  padding:4mm 2mm;
  border-top:1px solid #d8ad4a;
}

.report-cover-bottom span,
.report-cover-bottom strong{
  display:block;
}

.report-cover-bottom span{
  color:#758690;
  font-size:7pt;
}

.report-cover-bottom strong{
  margin-top:1mm;
  font-size:9pt;
}

.report-cover-date{
  margin-top:5mm;
  font-size:8pt;
}


/* BIODATA */

.report-biodata-header{
  display:grid;
  grid-template-columns:23mm 1fr 23mm;
  align-items:center;
  gap:4mm;
  text-align:center;
}

.report-biodata-header img{
  display:block;
  max-width:20mm;
  max-height:20mm;
  margin:auto;
  object-fit:contain;
}

.report-biodata-header span,
.report-biodata-header strong,
.report-biodata-header small{
  display:block;
}

.report-biodata-header h1{
  margin:1mm 0;
  font-size:16pt;
}

.report-biodata-header span{
  font-size:10pt;
  font-weight:700;
}

.report-biodata-header strong{
  font-size:11pt;
}

.report-biodata-header small{
  margin-top:1mm;
  font-size:7.5pt;
}

.report-biodata-line{
  height:2px;
  margin:4mm 0 6mm;
  border-top:2px solid #111;
  border-bottom:1px solid #111;
}

.report-biodata-table{
  width:100%;
  border-collapse:collapse;
  font-size:9pt;
}

.report-biodata-table td{
  padding:1.8mm 1mm;
  vertical-align:top;
  border-bottom:1px dotted #c4c4c4;
}

.report-biodata-no{
  width:8mm;
  text-align:center;
}

.report-biodata-label{
  width:55mm;
}

.report-biodata-colon{
  width:5mm;
  text-align:center;
}

.report-biodata-sign{
  display:flex;
  justify-content:flex-end;
  margin-top:8mm;
  text-align:center;
  font-size:8pt;
}

.report-biodata-sign>div{
  width:65mm;
}

.report-biodata-sign span{
  display:block;
}

.report-biodata-sign p{
  margin:4mm 0 15mm;
}

.report-biodata-sign strong{
  text-decoration:underline;
}


@media(max-width:900px){

  .report-settings-grid,
  .settings-class-grid{
    grid-template-columns:1fr;
  }

  .settings-form-grid{
    grid-template-columns:1fr;
  }

  .settings-span-2{
    grid-column:auto;
  }

  .report-document-sheet{
    width:100%;
    min-height:auto;
  }

}


@media print{

  .batch-print-toolbar,
  .document-toolbar{
    display:none !important;
  }

  .report-batch,
  .document-batch{
    display:block !important;
  }

  .report-document-sheet{
    width:210mm !important;
    min-height:330mm !important;
    margin:0 !important;
    box-shadow:none !important;
    page-break-after:always;
    break-after:page;
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact;
  }

  .report-batch .nurul-report-sheet{
    page-break-after:always;
    break-after:page;
  }

  .report-batch .nurul-report-sheet:last-child,
  .document-batch .report-document-sheet:last-child,
  .document-preview-page .report-document-sheet:last-of-type{
    page-break-after:auto;
    break-after:auto;
  }

}


/* =========================================================
   BIODATA PHOTO BOTTOM V3
   ========================================================= */

.report-biodata-bottom-v3{
  display:grid;

  grid-template-columns:
    45mm
    1fr;

  align-items:end;

  gap:15mm;

  width:100%;

  margin-top:8mm;

  box-sizing:border-box;
}


/* FOTO KIRI */

.report-biodata-photo-bottom-v3{
  display:flex;

  align-items:flex-end;
  justify-content:flex-start;

  min-height:48mm;
}


.report-biodata-photo-bottom-v3
.report-biodata-photo-v2{
  width:30mm;
  height:40mm;

  min-width:30mm;
  min-height:40mm;

  flex:0 0 30mm;

  margin:0;

  box-sizing:border-box;

  border:
    1.2px solid #222;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:2mm;

  background:#fff;
}


.report-biodata-photo-bottom-v3
.report-biodata-photo-v2 span{
  color:#888;

  font-size:8pt;
  font-weight:700;
}


.report-biodata-photo-bottom-v3
.report-biodata-photo-v2 strong{
  color:#777;

  font-size:13pt;
}


/* TANDA TANGAN KANAN */

.report-biodata-sign-v3{
  display:flex !important;

  justify-content:flex-end !important;

  align-items:flex-end;

  margin:0 !important;

  text-align:center;
}


.report-biodata-sign-v3>div{
  width:65mm;
}


.report-biodata-sign-v3 span{
  display:block;
}


.report-biodata-sign-v3 p{
  margin:
    4mm 0 15mm;
}


.report-biodata-sign-v3 strong{
  display:block;

  font-size:8.5pt;

  text-decoration:underline;
}


/*
 * Matikan layout foto lama di atas
 * bila CSS lama masih tersimpan.
 */

.report-biodata-photo-row-v2{
  display:none !important;
}


@media print{

  .report-biodata-bottom-v3{
    display:grid !important;

    grid-template-columns:
      45mm
      1fr !important;

    align-items:end !important;

    gap:15mm !important;

    margin-top:7mm !important;

    break-inside:avoid !important;
    page-break-inside:avoid !important;
  }


  .report-biodata-photo-bottom-v3{
    min-height:45mm !important;
  }


  .report-biodata-photo-bottom-v3
  .report-biodata-photo-v2{
    width:30mm !important;
    height:40mm !important;

    min-width:30mm !important;
    min-height:40mm !important;

    border:
      1.2px solid #111 !important;
  }


  .report-biodata-sign-v3{
    margin:0 !important;
  }

}


/* =========================================================
   COVER PERMANEN V3
   ========================================================= */

.report-cover-permanent-v3{
  display:flex;

  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:2mm;

  width:100%;

  margin-top:auto;
  padding-top:8mm;

  border-top:
    1px solid #d8ad4a;

  text-align:center;
}


.report-cover-permanent-v3 strong{
  color:#163a5f;

  font-size:11pt;
  font-weight:800;
}


.report-cover-permanent-v3 span{
  color:#384f5e;

  font-size:9pt;
  font-weight:600;
}


.report-cover-permanent-v3 small{
  color:#637580;

  font-size:8pt;
}


/*
 * Nonaktifkan elemen Cover lama bila
 * masih ada CSS/source cache lama.
 */

.report-cover-bottom,
.report-cover-date{
  display:none !important;
}


@media print{

  .report-cover-bottom,
  .report-cover-date{
    display:none !important;
  }


  .report-cover-permanent-v3{
    display:flex !important;

    break-inside:avoid;
    page-break-inside:avoid;
  }

}


/* =========================================================
   COVER PREMIUM GOLD V4
   ========================================================= */

/* cover utama */
.report-cover-sheet{
  position:relative;
  background:
    linear-gradient(180deg,#fffefb 0%, #fffdfa 58%, #fffdf8 100%);
  border:1.6px solid #274b63 !important;
  outline:1px solid #d4a33a !important;
  outline-offset:-6mm;
  box-shadow:0 10px 26px rgba(17,40,58,.06);
}

/* aksen gold tipis */
.report-cover-sheet::before{
  content:"";
  position:absolute;
  inset:9mm;
  border:1px solid rgba(212,163,58,.38);
  pointer-events:none;
}

/* header atas */
.report-cover-top{
  display:grid;
  grid-template-columns:26mm 1fr 26mm;
  align-items:center;
  gap:6mm;
  margin-top:2mm;
}

.report-cover-top > div{
  text-align:center;
}

.report-cover-top strong{
  display:block;
  color:#111;
  font-size:12.5pt;
  font-weight:800;
  letter-spacing:.2px;
}

.report-cover-top span{
  display:block;
  margin-top:1.2mm;
  color:#2d2d2d;
  font-size:10pt;
  font-weight:700;
}

/* logo atas */
.report-cover-top-logo{
  display:block;
  width:20mm;
  height:20mm;
  margin:auto;
  object-fit:contain;
  object-position:center;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  filter:none !important;
}

/*
 * Hilangkan garis tipis di bagian atas logo kiri
 * dengan crop sangat kecil.
 */
.report-cover-top-logo-left{
  clip-path:inset(1px 0 0 0);
}

/* area utama cover */
.report-cover-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  margin:22mm 0 0;
  text-align:center;
}

.report-cover-arabic{
  display:block;
  margin-bottom:4mm;
  color:#2f2f2f;
  font-family:"Traditional Arabic","Amiri",serif;
  font-size:17pt;
  line-height:1.2;
}

.report-cover-main h1{
  margin:0;
  color:#143f63;
  font-size:24pt;
  font-weight:900;
  letter-spacing:.4px;
  text-shadow:0 1px 0 rgba(212,163,58,.26);
}

.report-cover-main h2{
  margin:2mm 0 9mm;
  color:#111;
  font-size:14pt;
  font-weight:800;
}

/* logo utama tengah diperkecil sedikit */
.report-cover-logo-main{
  display:block;
  width:31mm !important;
  height:31mm !important;
  margin:0 auto 10mm !important;
  object-fit:contain;
  object-position:center;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* kotak nama santri dibuat lebih compact dan premium */
.report-cover-student{
  width:108mm !important;
  margin:0 auto !important;
  padding:5.5mm 8mm !important;
  box-sizing:border-box;
  border:1.5px solid #274b63 !important;
  border-radius:5mm !important;
  background:
    linear-gradient(180deg,#ffffff 0%, #fffcf6 100%);
  box-shadow:
    0 0 0 1px rgba(212,163,58,.50),
    0 8px 18px rgba(20,48,70,.05);
}

.report-cover-student small{
  display:block;
  margin-top:3mm;
  color:#8c7a42;
  font-size:7.2pt;
  font-weight:800;
  letter-spacing:.25px;
}

.report-cover-student small:first-child{
  margin-top:0;
}

.report-cover-student strong{
  display:block;
  margin-top:1.2mm;
  color:#0f2740;
  font-size:15pt;
  font-weight:900;
}

/* identitas madrasah bawah dinaikkan */
.report-cover-permanent-v3{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2mm;
  width:100%;
  margin-top:34mm !important;
  padding-top:6mm !important;
  border-top:1.4px solid #d4a33a !important;
  text-align:center;
}

.report-cover-permanent-v3 strong{
  color:#133e61;
  font-size:11pt;
  font-weight:900;
}

.report-cover-permanent-v3 span{
  color:#2f4b5f;
  font-size:8.8pt;
  font-weight:700;
}

.report-cover-permanent-v3 small{
  color:#667682;
  font-size:7.7pt;
}

/* pastikan elemen lama tetap mati */
.report-cover-bottom,
.report-cover-date{
  display:none !important;
}


/* print */
@media print{

  .report-cover-sheet{
    box-shadow:none !important;
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact;
  }

  .report-cover-sheet::before{
    display:block !important;
  }

  .report-cover-top-logo{
    box-shadow:none !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
  }

  .report-cover-top-logo-left{
    clip-path:inset(1px 0 0 0);
  }

  .report-cover-logo-main{
    width:31mm !important;
    height:31mm !important;
  }

  .report-cover-student{
    box-shadow:
      0 0 0 1px rgba(212,163,58,.48) !important;
  }

  .report-cover-permanent-v3{
    margin-top:34mm !important;
  }

}


/* =========================================================
   ARABIC FONT REVISION V1
   ========================================================= */

/* ---------------------------------------------------------
   COVER
   --------------------------------------------------------- */

.report-cover-arabic{
  font-family:"Traditional Arabic","Amiri","Noto Naskh Arabic",serif !important;
  font-size:22pt !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
  color:#1f1f1f !important;
}


/* ---------------------------------------------------------
   RAPOR / LEMBAR NILAI
   Target umum untuk semua tulisan Arab di dalam sheet rapor
   --------------------------------------------------------- */

/* Judul Arab di area kop / heading rapor */
.nurul-report-sheet .report-title-arabic,
.nurul-report-sheet .nurul-report-arabic-title,
.nurul-report-sheet .arabic-title,
.nurul-report-sheet [lang="ar"]{
  font-family:"Traditional Arabic","Amiri","Noto Naskh Arabic",serif !important;
}

/* Kolom Arab pada tabel rapor:
   biasanya kolom ke-3 dan ke-6 */
.nurul-report-sheet table th:nth-child(3),
.nurul-report-sheet table td:nth-child(3),
.nurul-report-sheet table th:nth-child(6),
.nurul-report-sheet table td:nth-child(6){
  font-family:"Traditional Arabic","Amiri","Noto Naskh Arabic",serif !important;
  font-size:13.5pt !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  text-align:center !important;
  direction:rtl !important;
}

/* Judul/kategori Arab pada baris kelompok mapel,
   misalnya الكتابة / القراءة والحفظ / العملى */
.nurul-report-sheet table tr td[colspan]{
  font-family:inherit;
}

.nurul-report-sheet table tr td[colspan]:has(span[lang="ar"]),
.nurul-report-sheet table tr th[colspan]:has(span[lang="ar"]){
  font-family:"Traditional Arabic","Amiri","Noto Naskh Arabic",serif !important;
  font-size:14pt !important;
  line-height:1.25 !important;
  font-weight:700 !important;
}

/* Fallback umum:
   bila teks Arab ada di cell yang memang berisi huruf Arab */
.nurul-report-sheet table td,
.nurul-report-sheet table th{
  word-break:normal;
}

.nurul-report-sheet table td[dir="rtl"],
.nurul-report-sheet table th[dir="rtl"]{
  font-family:"Traditional Arabic","Amiri","Noto Naskh Arabic",serif !important;
  font-size:13.5pt !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  text-align:center !important;
}

/* Kalau ada blok Arab di luar tabel */
.nurul-report-sheet .arabic,
.nurul-report-sheet .text-ar,
.nurul-report-sheet .report-arabic{
  font-family:"Traditional Arabic","Amiri","Noto Naskh Arabic",serif !important;
  font-size:13.5pt !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  direction:rtl !important;
}


/* ---------------------------------------------------------
   PRINT
   --------------------------------------------------------- */

@media print{

  .report-cover-arabic{
    font-size:22pt !important;
    line-height:1.35 !important;
  }

  .nurul-report-sheet table th:nth-child(3),
  .nurul-report-sheet table td:nth-child(3),
  .nurul-report-sheet table th:nth-child(6),
  .nurul-report-sheet table td:nth-child(6),
  .nurul-report-sheet table td[dir="rtl"],
  .nurul-report-sheet table th[dir="rtl"],
  .nurul-report-sheet .arabic,
  .nurul-report-sheet .text-ar,
  .nurul-report-sheet .report-arabic,
  .nurul-report-sheet [lang="ar"]{
    font-family:"Traditional Arabic","Amiri","Noto Naskh Arabic",serif !important;
    font-size:13.5pt !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    direction:rtl !important;
  }

}


/* =========================================================
   QR VERIFICATION POSITION V1.1
   ========================================================= */

.nurul-report-sheet{
  position:relative;
}


.nurul-report-verification-v1{
  position:absolute;

  left:9mm;
  bottom:13mm;

  width:24mm;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  text-align:center;

  z-index:2;
}


.nurul-report-verification-v1 img{
  display:block;

  width:20mm;
  height:20mm;

  padding:1mm;

  box-sizing:border-box;

  object-fit:contain;

  border:
    1px solid #c7d0d5;

  border-radius:2mm;

  background:#fff;
}


.nurul-report-verification-v1 strong{
  display:block;

  margin-top:1mm;

  color:#163a5f;

  font-size:6.5pt;

  font-weight:900;

  letter-spacing:.3px;
}


.nurul-report-verification-v1 span{
  display:block;

  margin-top:.3mm;

  color:#7b8992;

  font-size:5.5pt;
}


@media print{

  .nurul-report-sheet{
    position:relative !important;
  }


  .nurul-report-verification-v1{
    position:absolute !important;

    left:9mm !important;
    bottom:13mm !important;

    width:24mm !important;

    z-index:2 !important;
  }


  .nurul-report-verification-v1 img{
    width:20mm !important;
    height:20mm !important;

    padding:1mm !important;

    background:#fff !important;

    print-color-adjust:exact;
    -webkit-print-color-adjust:exact;
  }

}


/* =========================================================
   QR CLEAN + TTD WALI ALIGN V2
   ========================================================= */

/*
 * QR tetap di kiri.
 * Karena label di bawah QR sudah dihapus,
 * posisinya dibuat lebih sederhana.
 */

.nurul-report-verification-v1{
  left:10mm !important;
  bottom:17mm !important;

  width:22mm !important;
}


.nurul-report-verification-v1 img{
  width:22mm !important;
  height:22mm !important;

  padding:1mm !important;

  border:
    1px solid #c7d0d5 !important;

  border-radius:1.5mm !important;

  background:#fff !important;
}


/*
 * Jika style label QR lama masih tersimpan,
 * pastikan benar-benar tidak tampil.
 */

.nurul-report-verification-v1 strong,
.nurul-report-verification-v1 span{
  display:none !important;
}


/*
 * Geser HANYA tanda tangan Orang Tua / Wali
 * mendekati kolom Wali Kelas.
 *
 * Wali Kelas dan Kepala Madrasah tidak berubah.
 */

.nurul-signatures > div:first-child{
  transform:
    translateX(22mm);
}


@media print{

  .nurul-report-verification-v1{
    left:10mm !important;
    bottom:17mm !important;

    width:22mm !important;
  }


  .nurul-report-verification-v1 img{
    width:22mm !important;
    height:22mm !important;
  }


  .nurul-report-verification-v1 strong,
  .nurul-report-verification-v1 span{
    display:none !important;
  }


  .nurul-signatures > div:first-child{
    transform:
      translateX(22mm) !important;
  }

}


/* =========================================================
   QR PRINT ALIGN FINAL
   ========================================================= */

/*
 * Tujuan:
 * - QR diperbesar
 * - QR dinaikkan agar sejajar dengan area ttd Orang Tua / Wali
 * - posisi preview dan print dibuat konsisten
 */

.nurul-report-verification-v1{
  left: 10mm !important;
  bottom: 24mm !important;
  width: 28mm !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.nurul-report-verification-v1 img{
  width: 26mm !important;
  height: 26mm !important;

  display:block !important;
  object-fit:contain !important;

  padding:1mm !important;
  background:#fff !important;

  border:1px solid #bfc9cf !important;
  border-radius:1.2mm !important;

  box-sizing:border-box !important;
}

/* pastikan label QR tetap mati */
.nurul-report-verification-v1 strong,
.nurul-report-verification-v1 span{
  display:none !important;
}

/*
 * posisi ttd Orang Tua / Wali tetap didekatkan ke Wali Kelas
 * sedikit disesuaikan agar harmonis dengan QR yang lebih besar
 */
.nurul-signatures > div:first-child{
  transform: translateX(20mm) !important;
}


/* ===================== PRINT ===================== */

@media print{

  .nurul-report-sheet{
    position:relative !important;
  }

  .nurul-report-verification-v1{
    position:absolute !important;
    left: 10mm !important;
    bottom: 24mm !important;
    width: 28mm !important;

    z-index:3 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .nurul-report-verification-v1 img{
    width: 26mm !important;
    height: 26mm !important;

    padding:1mm !important;
    background:#fff !important;
    border:1px solid #bfc9cf !important;
    border-radius:1.2mm !important;

    box-sizing:border-box !important;

    print-color-adjust:exact !important;
    -webkit-print-color-adjust:exact !important;
  }

  .nurul-report-verification-v1 strong,
  .nurul-report-verification-v1 span{
    display:none !important;
  }

  .nurul-signatures > div:first-child{
    transform: translateX(20mm) !important;
  }

}


/* =========================================================
   QR FLOW SIGNATURE V3
   PREVIEW DAN PRINT MEMAKAI FLOW YANG SAMA
   ========================================================= */

/*
 * Nonaktifkan sistem floating/absolute lama.
 */

.nurul-report-verification-v1,
.nurul-report-verification-floating{
  display:none !important;
}


/*
 * Sekarang tanda tangan memiliki 4 kolom:
 *
 * QR | Orang Tua/Wali | Wali Kelas | Kepala Madrasah
 */

.nurul-signatures{
  display:grid !important;

  grid-template-columns:
    28mm
    minmax(0,1fr)
    minmax(0,1fr)
    minmax(0,1fr) !important;

  align-items:start !important;

  column-gap:4mm !important;

  width:100% !important;

  margin-top:3mm !important;

  box-sizing:border-box !important;

  text-align:center;
}


/*
 * Hapus transform lama.
 * Karena first-child sekarang adalah QR.
 */

.nurul-signatures > div:first-child{
  transform:none !important;
}


/* QR */

.nurul-signature-qr-v3{
  display:flex !important;

  align-items:flex-start !important;
  justify-content:center !important;

  min-height:28mm !important;

  padding-top:0 !important;

  transform:none !important;
}


.nurul-signature-qr-v3 img{
  display:block !important;

  width:26mm !important;
  height:26mm !important;

  margin:0 !important;

  padding:1mm !important;

  box-sizing:border-box !important;

  object-fit:contain !important;

  border:
    1px solid #c4cdd2 !important;

  border-radius:1.2mm !important;

  background:#fff !important;
}


/*
 * Tiga kolom tanda tangan.
 */

.nurul-signatures > div:not(.nurul-signature-qr-v3){
  min-width:0;

  min-height:28mm !important;

  display:flex !important;

  flex-direction:column !important;

  justify-content:space-between !important;

  align-items:center !important;

  transform:none !important;
}


.nurul-signatures
> div:not(.nurul-signature-qr-v3)
> span{
  display:block !important;

  min-height:5mm;

  font-size:7.8pt;
}


.nurul-signatures
> div:not(.nurul-signature-qr-v3)
> strong{
  display:block !important;

  width:100%;

  padding-top:15mm !important;

  font-size:8pt;

  text-align:center;

  text-decoration:underline;
}


/* =========================================================
   PRINT
   PERSIS MENGIKUTI FLOW PREVIEW
   ========================================================= */

@media print{

  .nurul-signatures{
    display:grid !important;

    grid-template-columns:
      28mm
      minmax(0,1fr)
      minmax(0,1fr)
      minmax(0,1fr) !important;

    align-items:start !important;

    column-gap:4mm !important;

    width:100% !important;

    margin-top:3mm !important;

    break-inside:avoid !important;
    page-break-inside:avoid !important;
  }


  .nurul-signature-qr-v3{
    display:flex !important;

    align-items:flex-start !important;
    justify-content:center !important;

    min-height:28mm !important;

    transform:none !important;
  }


  .nurul-signature-qr-v3 img{
    width:26mm !important;
    height:26mm !important;

    margin:0 !important;

    padding:1mm !important;

    background:#fff !important;

    print-color-adjust:exact !important;
    -webkit-print-color-adjust:exact !important;
  }


  .nurul-signatures
  > div:not(.nurul-signature-qr-v3){
    min-height:28mm !important;

    transform:none !important;
  }


  .nurul-signatures
  > div:not(.nurul-signature-qr-v3)
  > strong{
    padding-top:15mm !important;
  }

}


/* =========================================================
   COVER PRINT PROPORTION + FRAME V5
   ========================================================= */


/*
 * Bingkai lama menggunakan border + outline.
 * Outline rawan terpotong pada hasil print.
 *
 * Sekarang cover tidak memakai border luar.
 * Dua bingkai dibuat sepenuhnya DI DALAM halaman.
 */

.report-cover-sheet{
  position:relative !important;

  border:0 !important;
  outline:0 !important;

  padding:
    18mm 15mm 15mm !important;

  background:
    linear-gradient(
      180deg,
      #fffefb 0%,
      #fffdfa 55%,
      #fffdf8 100%
    ) !important;

  overflow:hidden !important;
}


/* BINGKAI LUAR */

.report-cover-sheet::before{
  content:"" !important;

  position:absolute !important;

  top:7mm !important;
  right:7mm !important;
  bottom:7mm !important;
  left:7mm !important;

  border:
    1px solid
    rgba(38,73,96,.70) !important;

  box-sizing:border-box !important;

  pointer-events:none !important;

  z-index:0 !important;
}


/* BINGKAI DALAM GOLD */

.report-cover-sheet::after{
  content:"" !important;

  position:absolute !important;

  top:10mm !important;
  right:10mm !important;
  bottom:10mm !important;
  left:10mm !important;

  border:
    1px solid
    rgba(205,159,55,.72) !important;

  box-sizing:border-box !important;

  pointer-events:none !important;

  z-index:0 !important;
}


/*
 * Semua isi cover berada di atas bingkai.
 */

.report-cover-sheet > *{
  position:relative;

  z-index:1;
}


/* =========================================================
   1. KOP DITURUNKAN
   ========================================================= */

.report-cover-top{
  margin-top:4mm !important;

  grid-template-columns:
    26mm
    minmax(0,1fr)
    26mm !important;

  align-items:center !important;

  gap:6mm !important;
}


.report-cover-top-logo{
  width:20mm !important;
  height:20mm !important;

  max-width:20mm !important;
  max-height:20mm !important;
}


/* =========================================================
   2. BLOK UTAMA
   ========================================================= */

.report-cover-main{
  margin:
    28mm 0 0 !important;
}


/*
 * Judul Arab tetap cukup besar.
 */

.report-cover-arabic{
  margin-bottom:4mm !important;

  font-size:22pt !important;
}


/*
 * Logo utama sedikit lebih compact.
 */

.report-cover-logo-main{
  width:30mm !important;
  height:30mm !important;

  margin:
    0 auto 13mm !important;
}


/* =========================================================
   3. KOTAK NAMA DITURUNKAN
   ========================================================= */

.report-cover-student{
  width:108mm !important;

  margin:
    9mm auto 0 !important;

  padding:
    5.5mm 8mm !important;
}


/*
 * Jarak teks dalam kotak dipertahankan compact.
 */

.report-cover-student small{
  margin-top:3mm !important;
}

.report-cover-student small:first-child{
  margin-top:0 !important;
}


/* =========================================================
   4. IDENTITAS MADRASAH BAWAH
   ========================================================= */

.report-cover-permanent-v3{
  margin-top:auto !important;

  padding-top:6mm !important;

  transform:
    translateY(-7mm);

  border-top:
    1px solid
    rgba(205,159,55,.78) !important;
}


/* =========================================================
   PRINT
   ========================================================= */

@media print{

  .report-cover-sheet{
    position:relative !important;

    width:210mm !important;
    min-height:330mm !important;

    margin:0 !important;

    padding:
      18mm 15mm 15mm !important;

    border:0 !important;
    outline:0 !important;

    overflow:hidden !important;

    box-shadow:none !important;

    print-color-adjust:exact !important;
    -webkit-print-color-adjust:exact !important;
  }


  /*
   * Dua frame berada aman di dalam
   * printable page sehingga tidak terpotong.
   */

  .report-cover-sheet::before{
    display:block !important;

    top:7mm !important;
    right:7mm !important;
    bottom:7mm !important;
    left:7mm !important;

    border:
      1px solid
      rgba(38,73,96,.70) !important;
  }


  .report-cover-sheet::after{
    display:block !important;

    top:10mm !important;
    right:10mm !important;
    bottom:10mm !important;
    left:10mm !important;

    border:
      1px solid
      rgba(205,159,55,.72) !important;
  }


  .report-cover-top{
    margin-top:4mm !important;
  }


  .report-cover-main{
    margin:
      28mm 0 0 !important;
  }


  .report-cover-logo-main{
    width:30mm !important;
    height:30mm !important;

    margin:
      0 auto 13mm !important;
  }


  .report-cover-student{
    margin:
      9mm auto 0 !important;
  }


  .report-cover-permanent-v3{
    margin-top:auto !important;

    transform:
      translateY(-7mm) !important;
  }

}


/* =========================================================
   SIDEBAR FINAL V2
   RAPOR MADIN NURUL HIDAYAH
   ========================================================= */

@media(min-width:900px){

  .premium-sidebar{
    padding:
      18px 16px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    scrollbar-width:thin;
    scrollbar-color:
      rgba(255,255,255,.20)
      transparent;
  }


  .premium-sidebar::-webkit-scrollbar{
    width:5px;
  }


  .premium-sidebar::-webkit-scrollbar-track{
    background:transparent;
  }


  .premium-sidebar::-webkit-scrollbar-thumb{
    background:
      rgba(255,255,255,.18);

    border-radius:10px;
  }


  .premium-sidebar::-webkit-scrollbar-thumb:hover{
    background:
      rgba(255,255,255,.28);
  }


  .premium-sidebar
  .premium-brand{
    min-height:66px !important;

    padding:
      0 6px 16px !important;
  }


  .premium-sidebar
  .premium-nav{
    padding:
      10px 0 12px !important;

    gap:2px !important;
  }


  .premium-sidebar
  .nav-section-title{
    margin-top:7px !important;

    padding:
      7px 12px 4px !important;

    font-size:8.5px !important;
  }


  .premium-sidebar
  .premium-nav
  .nav-link{
    min-height:38px !important;

    padding:
      7px 10px !important;

    gap:9px !important;

    border-radius:10px !important;

    font-size:13px !important;
  }


  .premium-sidebar
  .nav-symbol{
    width:23px !important;
    min-width:23px !important;

    height:23px !important;

    border-radius:7px !important;

    font-size:11px !important;
  }


  .premium-sidebar
  .premium-sidebar-user{
    padding:
      11px !important;

    border-radius:13px !important;
  }


  .premium-sidebar
  .sidebar-user-caption{
    margin-bottom:3px !important;
  }


  .premium-sidebar
  .premium-sidebar-user strong{
    font-size:12px !important;
  }


  .premium-sidebar
  .premium-sidebar-user small{
    font-size:10px !important;
  }

}


.premium-nav
.nav-link > span:last-child{
  min-width:0;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.premium-nav
.nav-link.active{
  font-weight:800 !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(80,208,197,.05);
}


.premium-nav
.nav-link.active
.nav-symbol{
  color:#9af0e8 !important;

  background:
    rgba(23,177,164,.18) !important;
}


@media(max-width:899px){

  .premium-sidebar
  .premium-nav{
    padding-top:
      10px !important;

    gap:
      3px !important;
  }


  .premium-sidebar
  .nav-section-title{
    margin-top:
      8px !important;

    padding:
      7px 12px 4px !important;
  }


  .premium-sidebar
  .premium-nav
  .nav-link{
    min-height:
      42px !important;

    padding:
      9px 11px !important;
  }

}


/* =========================================================
   FIX FONT PREDIKAT SIKAP
   Kolom ke-3 tabel Sikap adalah huruf Latin A/B/C/D/E,
   bukan kolom Arab.
   ========================================================= */

.nurul-support-grid
.nurul-support-table:first-child
td:nth-child(3),

.nurul-support-grid
.nurul-support-table:first-child
td:nth-child(3) strong{

  font-family:inherit !important;

  font-size:inherit !important;

  line-height:inherit !important;

  letter-spacing:normal !important;

  direction:ltr !important;

  unicode-bidi:normal !important;
}


/*
 * Predikat tetap dibuat tegas,
 * tetapi memakai font Latin aplikasi.
 */

.nurul-support-grid
.nurul-support-table:first-child
td:nth-child(3) strong{

  font-weight:800 !important;
}


@media print{

  .nurul-support-grid
  .nurul-support-table:first-child
  td:nth-child(3),

  .nurul-support-grid
  .nurul-support-table:first-child
  td:nth-child(3) strong{

    font-family:inherit !important;

    font-size:inherit !important;

    line-height:inherit !important;

    letter-spacing:normal !important;

    direction:ltr !important;
  }


  .nurul-support-grid
  .nurul-support-table:first-child
  td:nth-child(3) strong{

    font-weight:800 !important;
  }

}


/* =========================================================
   DASHBOARD FINAL V2 SIDEBAR DEPTH
   ========================================================= */


/* SIDEBAR INACTIVE DEPTH */

.premium-sidebar
.premium-nav
.nav-link{
  position:relative;

  border:1px solid transparent;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}


.premium-sidebar
.premium-nav
.nav-link:not(.active){
  background:
    rgba(255,255,255,.018);

  border-color:
    rgba(255,255,255,.025);

  color:
    rgba(239,247,253,.89);
}


.premium-sidebar
.premium-nav
.nav-link:not(.active)
.nav-symbol{
  background:
    rgba(255,255,255,.065);

  border:
    1px solid
    rgba(255,255,255,.045);

  color:#a9e1dd;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.035);
}


.premium-sidebar
.premium-nav
.nav-link:not(.active):hover{
  color:#fff;

  background:
    linear-gradient(
      90deg,
      rgba(32,173,164,.13),
      rgba(255,255,255,.055)
    );

  border-color:
    rgba(99,219,210,.13);

  transform:
    translateX(2px);

  box-shadow:
    0 5px 14px
    rgba(0,0,0,.08);
}


.premium-sidebar
.premium-nav
.nav-link:not(.active):hover
.nav-symbol{
  background:
    rgba(25,181,171,.17);

  border-color:
    rgba(105,226,218,.18);

  color:#e0fffc;
}


.premium-sidebar
.premium-nav
.nav-link.active{
  box-shadow:
    0 8px 18px
    rgba(3,25,43,.16),
    inset 0 1px 0
    rgba(255,255,255,.04);
}


/* QUICK ACTIONS */

.dashboard-quick-actions{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;

  margin:
    -4px 0 22px;
}


.dashboard-quick-card{
  min-width:0;

  min-height:76px;

  display:grid;

  grid-template-columns:
    42px minmax(0,1fr) auto;

  align-items:center;

  gap:13px;

  padding:14px 16px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #f8fbfd
    );

  border:
    1px solid #e1e9ef;

  border-radius:16px;

  box-shadow:
    0 7px 20px
    rgba(19,51,78,.055);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.dashboard-quick-card:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(22,140,140,.25);

  box-shadow:
    0 12px 28px
    rgba(19,51,78,.09);
}


.dashboard-quick-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:
    linear-gradient(
      145deg,
      #e9f7f5,
      #dff1f3
    );

  color:#087d78;

  font-weight:900;
  font-size:17px;
}


.dashboard-quick-card strong{
  display:block;

  color:#123a5c;

  font-size:13px;
}


.dashboard-quick-card small{
  display:block;

  margin-top:4px;

  color:#758596;

  font-size:11px;

  line-height:1.35;
}


.dashboard-quick-card > b{
  color:#8ba0b2;

  font-size:20px;
}


/* EMPTY STATE */

.dashboard-no-student{
  display:inline-flex;

  padding:5px 9px;

  border-radius:999px;

  background:#f1f5f7;

  color:#7f8d99;

  font-size:10px;

  font-weight:800;

  white-space:nowrap;
}


/* ROMBEL TUNTAS */

.dashboard-ready-stat strong{
  color:#168c8c;
}


/* ATTENTION */

.dashboard-attention-panel{
  margin:
    0 0 22px;

  padding:20px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #fbfcfd
    );

  border:
    1px solid #e4eaef;

  border-radius:18px;

  box-shadow:
    0 9px 28px
    rgba(19,51,78,.055);
}


.dashboard-attention-head{
  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:18px;

  margin-bottom:16px;
}


.dashboard-attention-head h2{
  margin:
    4px 0 0;

  color:#102f4d;

  font-size:18px;
}


.dashboard-attention-head p{
  margin:
    5px 0 0;

  color:#718193;

  font-size:12px;
}


.dashboard-overall-progress{
  min-width:130px;

  text-align:right;
}


.dashboard-overall-progress strong{
  display:block;

  color:#168c8c;

  font-size:24px;

  line-height:1;
}


.dashboard-overall-progress span{
  display:block;

  margin-top:5px;

  color:#81909e;

  font-size:10px;

  font-weight:700;
}


.dashboard-attention-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:12px;
}


.dashboard-attention-item{
  min-width:0;

  display:flex;

  align-items:center;

  gap:11px;

  padding:13px 14px;

  border:
    1px solid #e6ebef;

  border-radius:14px;

  background:#fff;
}


.dashboard-attention-item > span{
  flex:
    0 0 34px;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:10px;

  font-size:14px;
  font-weight:900;
}


.dashboard-attention-item strong{
  display:block;

  color:#1a3b58;

  font-size:12px;

  line-height:1.3;
}


.dashboard-attention-item small{
  display:block;

  margin-top:3px;

  color:#7c8a98;

  font-size:10px;

  line-height:1.35;
}


.dashboard-attention-item.warning > span{
  background:#fff2d4;
  color:#9a6a00;
}


.dashboard-attention-item.info > span{
  background:#e9f3fb;
  color:#276b9b;
}


.dashboard-attention-item.danger > span{
  background:#fdeceb;
  color:#b4443d;
}


.dashboard-attention-item.success > span{
  background:#e8f7f0;
  color:#178254;
}


@media(max-width:1050px){

  .dashboard-quick-actions{
    grid-template-columns:1fr;
  }


  .dashboard-attention-grid{
    grid-template-columns:
      1fr 1fr;
  }

}


@media(max-width:700px){

  .dashboard-quick-actions{
    gap:10px;

    margin-bottom:16px;
  }


  .dashboard-quick-card{
    min-height:68px;

    padding:11px 12px;
  }


  .dashboard-quick-icon{
    width:38px;
    height:38px;
  }


  .dashboard-attention-panel{
    padding:15px;
  }


  .dashboard-attention-head{
    flex-direction:column;

    gap:10px;
  }


  .dashboard-overall-progress{
    text-align:left;
  }


  .dashboard-attention-grid{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   SIDEBAR FINAL V3
   TYPOGRAPHY + INACTIVE DEPTH
   ========================================================= */


/* ---------------------------------------------------------
   NAV CONTAINER
   --------------------------------------------------------- */

.premium-sidebar .premium-nav{
  gap:5px !important;
}


/* ---------------------------------------------------------
   SECTION TITLE
   --------------------------------------------------------- */

.premium-sidebar
.nav-section-title{

  margin:
    15px 9px 6px !important;

  font-size:
    10.5px !important;

  line-height:
    1.2 !important;

  font-weight:
    900 !important;

  letter-spacing:
    .13em !important;

  color:
    rgba(168,201,224,.76) !important;

  text-transform:
    uppercase;
}


/* ---------------------------------------------------------
   SEMUA MENU
   --------------------------------------------------------- */

.premium-sidebar
.premium-nav
.nav-link{

  min-height:
    42px !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    10px !important;

  padding:
    7px 9px !important;

  border-radius:
    11px !important;

  font-size:
    15px !important;

  line-height:
    1.2 !important;

  font-weight:
    750 !important;

  letter-spacing:
    -.01em;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}


/* Label menu */
.premium-sidebar
.premium-nav
.nav-link > span:last-child{

  min-width:
    0;

  flex:
    1;

  color:
    inherit;

  font-size:
    inherit !important;

  font-weight:
    inherit !important;

  white-space:
    nowrap;
}


/* ---------------------------------------------------------
   ICON TILE
   --------------------------------------------------------- */

.premium-sidebar
.premium-nav
.nav-symbol{

  flex:
    0 0 30px !important;

  width:
    30px !important;

  height:
    30px !important;

  display:
    grid !important;

  place-items:
    center !important;

  padding:
    0 !important;

  border-radius:
    9px !important;

  font-size:
    13px !important;

  line-height:
    1 !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}


/* ---------------------------------------------------------
   INACTIVE
   Tidak lagi flat.
   --------------------------------------------------------- */

.premium-sidebar
.premium-nav
.nav-link:not(.active){

  color:
    rgba(242,248,253,.93) !important;

  background:
    linear-gradient(
      100deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.022)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.055) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025),
    0 2px 6px
    rgba(2,20,34,.055) !important;
}


.premium-sidebar
.premium-nav
.nav-link:not(.active)
.nav-symbol{

  color:
    #b8ebe7 !important;

  background:
    linear-gradient(
      145deg,
      rgba(67,180,175,.13),
      rgba(255,255,255,.055)
    ) !important;

  border:
    1px solid
    rgba(130,220,214,.09) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04) !important;
}


/* ---------------------------------------------------------
   HOVER INACTIVE
   --------------------------------------------------------- */

.premium-sidebar
.premium-nav
.nav-link:not(.active):hover{

  color:
    #ffffff !important;

  background:
    linear-gradient(
      100deg,
      rgba(24,158,153,.20),
      rgba(255,255,255,.075)
    ) !important;

  border-color:
    rgba(96,220,211,.18) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.045),
    0 7px 16px
    rgba(0,15,30,.12) !important;

  transform:
    translateX(2px) !important;
}


.premium-sidebar
.premium-nav
.nav-link:not(.active):hover
.nav-symbol{

  color:
    #effffc !important;

  background:
    linear-gradient(
      145deg,
      rgba(28,181,171,.30),
      rgba(45,143,153,.19)
    ) !important;

  border-color:
    rgba(118,233,225,.22) !important;

  transform:
    scale(1.03);
}


/* ---------------------------------------------------------
   ACTIVE
   Tetap paling kuat.
   --------------------------------------------------------- */

.premium-sidebar
.premium-nav
.nav-link.active{

  color:
    #ffffff !important;

  border:
    1px solid
    rgba(76,207,198,.24) !important;

  box-shadow:
    0 8px 20px
    rgba(1,18,33,.18),
    inset 0 1px 0
    rgba(255,255,255,.055) !important;
}


.premium-sidebar
.premium-nav
.nav-link.active
.nav-symbol{

  color:
    #dffffb !important;

  border:
    1px solid
    rgba(94,224,216,.18) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.07),
    0 4px 10px
    rgba(0,18,32,.12) !important;
}


/* garis aktif dibuat sedikit lebih tegas */
.premium-sidebar
.premium-nav
.nav-link.active::before{

  width:
    3px !important;

  border-radius:
    0 5px 5px 0 !important;
}


/* ---------------------------------------------------------
   BRAND
   --------------------------------------------------------- */

.premium-sidebar
.premium-brand-copy strong{

  font-size:
    16px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .025em !important;
}


.premium-sidebar
.premium-brand-copy small{

  font-size:
    11.5px !important;

  color:
    rgba(213,230,242,.82) !important;
}


/* ---------------------------------------------------------
   ACCOUNT CARD
   --------------------------------------------------------- */

.premium-sidebar
.premium-sidebar-user{

  border:
    1px solid
    rgba(255,255,255,.085) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025) !important;
}


.premium-sidebar
.sidebar-user-caption{

  font-size:
    9.5px !important;

  letter-spacing:
    .13em !important;

  color:
    rgba(157,199,222,.78) !important;
}


.premium-sidebar
.premium-sidebar-user strong{

  font-size:
    13px !important;

  font-weight:
    850 !important;

  color:
    #fff !important;
}


.premium-sidebar
.premium-sidebar-user small{

  font-size:
    10.5px !important;

  line-height:
    1.35 !important;
}


/* ---------------------------------------------------------
   SCROLLBAR
   Dibuat lebih subtle.
   --------------------------------------------------------- */

.premium-sidebar::-webkit-scrollbar{
  width:
    5px !important;
}


.premium-sidebar::-webkit-scrollbar-thumb{

  background:
    rgba(119,190,210,.28) !important;

  border-radius:
    99px !important;
}


.premium-sidebar::-webkit-scrollbar-thumb:hover{

  background:
    rgba(119,210,218,.42) !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:899px){

  .premium-sidebar
  .premium-nav
  .nav-link{

    min-height:
      44px !important;

    font-size:
      15px !important;

    padding:
      7px 9px !important;
  }


  .premium-sidebar
  .premium-nav
  .nav-symbol{

    width:
      31px !important;

    height:
      31px !important;

    flex-basis:
      31px !important;
  }

}


/* =========================================================
   STRUKTUR AKADEMIK FINAL V2
   ========================================================= */


/* ---------------------------------------------------------
   PANEL ROMBEL
   --------------------------------------------------------- */

.academic-classes-panel{
  position:relative;
  overflow:hidden;
}


.academic-classes-panel::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:3px;

  background:
    linear-gradient(
      90deg,
      #168c8c,
      #1e6d94,
      transparent 75%
    );

  opacity:.72;
}


/* ---------------------------------------------------------
   TITLE + COUNTER
   --------------------------------------------------------- */

.academic-title-row{
  display:flex;

  align-items:center;

  gap:10px;

  flex-wrap:wrap;
}


.academic-title-row h2{
  margin:0;
}


.academic-class-count{
  display:inline-flex;

  align-items:center;

  min-height:26px;

  padding:
    5px 9px;

  border-radius:999px;

  background:#eaf7f5;

  border:
    1px solid
    rgba(22,140,140,.12);

  color:#087c77;

  font-size:10px;

  line-height:1;

  font-weight:900;

  white-space:nowrap;
}


/* ---------------------------------------------------------
   FORM TAMBAH ROMBEL
   --------------------------------------------------------- */

.academic-class-create{
  position:relative;

  margin:
    4px 0 16px !important;

  padding:
    42px 14px 14px !important;

  background:
    linear-gradient(
      145deg,
      #f8fbfd,
      #f4f8fa
    );

  border:
    1px solid #e1e8ed;

  border-radius:
    14px;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.85);
}


.academic-class-create::before{
  content:"Tambah Rombel Baru";

  position:absolute;

  top:12px;
  left:14px;

  color:#17405f;

  font-size:11px;

  line-height:1;

  font-weight:900;

  letter-spacing:.03em;
}


.academic-class-create label{
  color:#42596c;

  font-size:11px;

  font-weight:850;
}


.academic-class-create input,
.academic-class-create select{
  min-height:36px;

  border-color:
    #d4dee6;

  background:#fff;

  box-shadow:
    inset 0 1px 2px
    rgba(15,45,68,.025);
}


.academic-class-create input:hover,
.academic-class-create select:hover{
  border-color:
    #bdccd7;
}


.academic-class-create input:focus,
.academic-class-create select:focus{
  border-color:
    #168c8c;

  box-shadow:
    0 0 0 3px
    rgba(22,140,140,.09);
}


/* tombol tambah tetap tegas */
.academic-class-create
.btn-primary{
  min-height:36px;

  padding-left:16px;

  padding-right:16px;

  box-shadow:
    0 6px 14px
    rgba(16,47,77,.12);
}


/* ---------------------------------------------------------
   TABLE
   --------------------------------------------------------- */

.academic-class-table-wrap{
  border:
    1px solid #e0e7ed !important;

  border-radius:
    13px !important;

  overflow:auto;

  background:#fff;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.8);
}


.academic-class-table{
  min-width:
    680px !important;
}


.academic-class-table thead th{
  padding:
    10px 12px !important;

  background:
    linear-gradient(
      180deg,
      #f3f7fa,
      #eef4f8
    ) !important;

  color:#536979;

  font-size:
    10px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .055em !important;
}


.academic-class-table tbody td{
  padding:
    10px 12px !important;

  font-size:
    12px !important;

  border-bottom:
    1px solid #e8edf1 !important;
}


.academic-class-table tbody tr{
  transition:
    background .15s ease;
}


.academic-class-table tbody tr:hover{
  background:
    #f8fbfd !important;
}


.academic-class-table tbody tr:last-child td{
  border-bottom:
    0 !important;
}


/* Rombel lebih tegas */
.academic-class-table
tbody td:nth-child(3){
  color:#122f48;

  font-weight:800;
}


/* Status */
.academic-class-table
th:last-child,
.academic-class-table
td:last-child{
  width:120px;

  text-align:center !important;
}


.academic-class-table
td:last-child
.badge{
  margin-left:0;

  min-width:48px;

  justify-content:center;
}


/* ---------------------------------------------------------
   TOP TWO PANELS
   --------------------------------------------------------- */

.academic-classes-panel
.panel-head{
  margin-bottom:14px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:900px){

  .academic-class-create{
    padding:
      42px 12px 12px !important;
  }


  .academic-title-row{
    align-items:flex-start;
  }

}


@media(max-width:600px){

  .academic-class-count{
    font-size:9px;
  }


  .academic-class-create{
    margin-bottom:
      14px !important;
  }


  .academic-class-table tbody td{
    padding:
      9px 10px !important;
  }

}


/* =========================================================
   STUDENT PAGINATION V1
   ========================================================= */

.student-pagination{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:14px;

  margin-top:14px;

  padding:
    11px 13px;

  background:
    linear-gradient(
      145deg,
      #f8fbfd,
      #f4f8fa
    );

  border:
    1px solid #e1e8ed;

  border-radius:
    13px;
}


.student-pagination-info{
  color:#738394;

  font-size:11px;

  white-space:nowrap;
}


.student-pagination-info strong{
  color:#173c5b;

  font-weight:900;
}


.student-pagination-controls{
  display:flex;

  align-items:center;

  gap:5px;
}


.student-page-numbers{
  display:flex;

  align-items:center;

  gap:5px;
}


.student-page-btn{
  min-width:31px;
  height:31px;

  display:inline-grid;

  place-items:center;

  padding:
    0 8px;

  border:
    1px solid #d6e0e7;

  border-radius:
    9px;

  background:#fff;

  color:#183c5a;

  font-size:11px;

  font-weight:850;

  cursor:pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}


.student-page-btn:hover:not(:disabled){
  border-color:
    rgba(22,140,140,.30);

  color:#087d78;

  transform:
    translateY(-1px);

  box-shadow:
    0 4px 10px
    rgba(17,66,84,.08);
}


.student-page-btn.active{
  background:
    linear-gradient(
      145deg,
      #168c8c,
      #147b84
    );

  border-color:#168c8c;

  color:#fff;

  box-shadow:
    0 5px 12px
    rgba(22,140,140,.18);
}


.student-page-btn:disabled{
  opacity:.38;

  cursor:not-allowed;
}


.student-page-nav{
  font-size:14px;
}


.student-page-dots{
  min-width:24px;

  text-align:center;

  color:#8c9aa7;

  font-size:13px;
}


@media(max-width:650px){

  .student-pagination{
    align-items:flex-start;

    flex-direction:column;
  }


  .student-pagination-controls{
    width:100%;

    justify-content:
      space-between;
  }


  .student-page-numbers{
    overflow-x:auto;

    max-width:
      calc(100vw - 130px);
  }


  .student-page-btn{
    flex:
      0 0 auto;
  }

}


/* =========================================================
   STUDENT UI V3.1 DIRECT CLASS
   NO OBSERVER / NO WATCHER
   ========================================================= */


/* ---------------------------------------------------------
   DOWNLOAD TEMPLATE EXCEL
   --------------------------------------------------------- */

.student-template-btn-v3{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:8px !important;

  min-height:38px !important;

  padding:
    9px 14px !important;

  border:
    1px solid #168c8c !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      145deg,
      #168c8c,
      #117a80
    ) !important;

  color:#fff !important;

  font-size:
    12px !important;

  font-weight:
    850 !important;

  box-shadow:
    0 6px 15px
    rgba(22,140,140,.18) !important;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease !important;
}


.student-template-btn-v3::before{
  content:"↓";

  width:21px;
  height:21px;

  display:grid;
  place-items:center;

  border-radius:6px;

  background:
    rgba(255,255,255,.15);

  border:
    1px solid
    rgba(255,255,255,.16);

  font-size:13px;
  font-weight:900;
  line-height:1;
}


.student-template-btn-v3:hover{
  color:#fff !important;

  transform:
    translateY(-1px);

  box-shadow:
    0 9px 20px
    rgba(22,140,140,.24) !important;
}


/* ---------------------------------------------------------
   MODAL TAMBAH SANTRI
   Class aktual aplikasi: .student-form-card
   --------------------------------------------------------- */

.students-v2
.student-form-card{

  position:
    fixed !important;

  top:
    50% !important;

  left:
    50% !important;

  right:
    auto !important;

  bottom:
    auto !important;

  transform:
    translate(
      -50%,
      -50%
    ) !important;

  margin:
    0 !important;

  width:
    min(
      760px,
      calc(100vw - 40px)
    ) !important;

  max-width:
    760px !important;

  max-height:
    calc(
      100dvh - 40px
    ) !important;

  overflow-y:
    auto !important;

  overscroll-behavior:
    contain;

  z-index:
    10020 !important;

  border-radius:
    18px !important;

  box-shadow:
    0 28px 80px
    rgba(4,28,45,.28),
    0 8px 24px
    rgba(4,28,45,.13) !important;
}


/* scrollbar isi modal */

.students-v2
.student-form-card::-webkit-scrollbar{
  width:6px;
}


.students-v2
.student-form-card::-webkit-scrollbar-track{
  background:transparent;
}


.students-v2
.student-form-card::-webkit-scrollbar-thumb{
  background:#c5d2dc;
  border-radius:99px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:700px){

  .students-v2
  .student-form-card{

    width:
      calc(
        100vw - 20px
      ) !important;

    max-width:
      none !important;

    max-height:
      calc(
        100dvh - 20px
      ) !important;

    border-radius:
      15px !important;
  }

}


/* =========================================================
   SUBJECT STATUS V2.3
   ========================================================= */

.subject-monitor-level-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:25px;

  padding:5px 9px;

  border-radius:999px;
  border:1px solid transparent;

  font-size:9.5px;
  line-height:1;
  font-weight:900;

  white-space:nowrap;
}


/* Belum diatur */
.subject-monitor-level-status.status-empty{
  color:#74838f;

  background:#f1f4f6;

  border-color:#dde5e9;
}


/* Sudah diatur */
.subject-monitor-level-status.status-ready{
  color:#087a62;

  background:#e7f7f0;

  border-color:#c6eadb;
}


/* Sebagian */
.subject-monitor-level-status.status-partial{
  color:#926500;

  background:#fff4d8;

  border-color:#efdcaa;
}


.subject-monitor-level-head{
  gap:10px;
}


.subject-monitor-level-count{
  flex:0 0 auto;
}


@media(max-width:700px){

  .subject-monitor-level-status{
    padding:4px 7px;
    font-size:9px;
  }

}


/* =========================================================
   SUBJECT SUMMARY V3
   ========================================================= */

.subject-level-summary-v3{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;

  margin:
    0 0 18px;
}


.subject-level-summary-card-v3{
  position:relative;

  padding:
    15px 16px;

  border:
    1px solid #e1e8ed;

  border-radius:
    15px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f8fbfd
    );

  box-shadow:
    0 7px 20px
    rgba(19,51,78,.055);

  overflow:hidden;
}


.subject-level-summary-card-v3::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:4px;
  height:100%;

  background:#bfcbd3;
}


.subject-level-summary-card-v3.status-ready::before{
  background:#168c8c;
}


.subject-level-summary-card-v3.status-partial::before{
  background:#d2a531;
}


.subject-level-summary-card-v3.status-empty::before{
  background:#9caab4;
}


.subject-level-summary-head-v3{
  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:12px;
}


.subject-level-summary-label-v3{
  display:block;

  margin-bottom:4px;

  color:#8a99a6;

  font-size:9px;

  font-weight:900;

  letter-spacing:.12em;
}


.subject-level-summary-head-v3 strong{
  display:block;

  color:#143a58;

  font-size:15px;

  font-weight:900;
}


.subject-level-summary-badge-v3{
  display:inline-flex;

  align-items:center;

  min-height:25px;

  padding:
    5px 9px;

  border-radius:
    999px;

  font-size:9.5px;

  font-weight:900;

  white-space:nowrap;
}


.subject-level-summary-badge-v3.status-ready{
  color:#087a62;

  background:#e8f7f0;

  border:
    1px solid #caecdf;
}


.subject-level-summary-badge-v3.status-empty{
  color:#74838f;

  background:#f1f4f6;

  border:
    1px solid #dde5e9;
}


.subject-level-summary-badge-v3.status-partial{
  color:#926500;

  background:#fff4d8;

  border:
    1px solid #efdcaa;
}


.subject-level-summary-meta-v3{
  display:flex;

  align-items:center;

  gap:14px;

  margin-top:14px;

  padding-top:11px;

  border-top:
    1px solid #e7edf1;
}


.subject-level-summary-meta-v3 span{
  color:#7c8b98;

  font-size:10px;

  font-weight:700;
}


.subject-level-summary-meta-v3 b{
  color:#173e5d;

  font-size:12px;

  font-weight:900;
}


@media(max-width:900px){

  .subject-level-summary-v3{
    grid-template-columns:1fr;
  }

}


@media(max-width:600px){

  .subject-level-summary-head-v3{
    align-items:center;
  }


  .subject-level-summary-card-v3{
    padding:
      13px 14px;
  }

}


/* =========================================================
   GRADE SELECTOR PREMIUM V1.2
   ========================================================= */

.grade-selector-panel-v12{
  padding:22px;
}


.grade-selector-grid-v12{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(225px,1fr)
    );

  gap:17px;
}


/* CARD */

.grade-selector-card-v12{
  position:relative;

  display:flex;
  flex-direction:column;

  min-height:305px;

  padding:
    19px 18px 17px;

  border:
    1px solid #dde6ec;

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f8fbfd 100%
    );

  box-shadow:
    0 9px 24px
    rgba(15,48,74,.065);

  overflow:hidden;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}


.grade-selector-card-v12:hover{
  transform:
    translateY(-4px);

  border-color:
    #c7d6df;

  box-shadow:
    0 18px 42px
    rgba(14,48,75,.13);
}


/* TOP ACCENT */

.grade-selector-accent-v12{
  position:absolute;

  top:0;
  left:0;
  right:0;

  height:4px;

  background:#aeb9c1;
}


.grade-selector-card-v12.status-ready
.grade-selector-accent-v12{
  background:
    linear-gradient(
      90deg,
      #168c8c,
      #2ab5a6
    );
}


.grade-selector-card-v12.status-done
.grade-selector-accent-v12{
  background:
    linear-gradient(
      90deg,
      #c89c31,
      #dfba51
    );
}


/* HEADER */

.grade-selector-top-v12{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:8px;
}


.grade-selector-level-v12{
  color:#168c8c;

  font-size:10px;

  font-weight:900;

  letter-spacing:.075em;

  text-transform:uppercase;
}


.grade-selector-status-v12{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:24px;

  padding:
    4px 8px;

  border-radius:999px;

  font-size:8px;

  font-weight:900;

  line-height:1;

  text-transform:uppercase;

  white-space:nowrap;
}


.grade-selector-status-v12.status-ready{
  color:#087960;

  background:#e7f7ef;

  border:
    1px solid #c7ebdc;
}


.grade-selector-status-v12.status-done{
  color:#896207;

  background:#fff5d9;

  border:
    1px solid #efdda4;
}


.grade-selector-status-v12.status-empty{
  color:#77858f;

  background:#f0f3f5;

  border:
    1px solid #dfe5e9;
}


/* TITLE */

.grade-selector-title-v12{
  margin:
    15px 0 17px;
}


.grade-selector-title-v12 h3{
  margin:0;

  color:#123d5e;

  font-size:23px;

  line-height:1.1;

  font-weight:900;
}


.grade-selector-title-v12 small{
  display:block;

  margin-top:5px;

  color:#98a3ac;

  font-size:9px;

  font-weight:700;
}


/* STATS */

.grade-selector-stats-v12{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:9px;

  margin-bottom:18px;
}


.grade-selector-stats-v12>div{
  padding:
    10px 11px;

  border:
    1px solid #e4eaee;

  border-radius:
    11px;

  background:
    rgba(247,250,252,.94);
}


.grade-selector-stats-v12 small{
  display:block;

  color:#8a98a3;

  font-size:8px;

  font-weight:900;

  letter-spacing:.08em;
}


.grade-selector-stats-v12 strong{
  display:block;

  margin-top:3px;

  color:#143e5e;

  font-size:17px;

  line-height:1;

  font-weight:900;
}


/* PROGRESS */

.grade-selector-progress-title-v12{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:10px;

  color:#788895;

  font-size:10px;

  font-weight:800;
}


.grade-selector-progress-title-v12 strong{
  color:#143e5e;

  font-size:11px;

  font-weight:900;
}


.grade-selector-progress-v12{
  height:7px;

  margin-top:8px;

  border-radius:999px;

  background:#e8edf1;

  overflow:hidden;
}


.grade-selector-progress-v12>span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #168c8c,
      #31b9aa
    );
}


.grade-selector-card-v12.status-done
.grade-selector-progress-v12>span{
  background:
    linear-gradient(
      90deg,
      #c89c31,
      #dfb94f
    );
}


.grade-selector-progress-meta-v12{
  min-height:30px;

  margin-top:7px;

  color:#98a3ac;

  font-size:9px;

  line-height:1.35;
}


.grade-selector-progress-meta-v12 strong{
  color:#697984;
}


/* ACTIONS */

.grade-selector-actions-v12{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:8px;

  margin-top:auto;

  padding-top:14px;

  border-top:
    1px solid #e6ecef;
}


.grade-selector-btn-v12{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:6px;

  min-height:39px;

  padding:
    8px 9px;

  border-radius:10px;

  color:#fff;

  font-size:10.5px;

  font-weight:900;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}


.grade-selector-btn-v12:hover{
  transform:
    translateY(-1px);
}


.grade-selector-btn-v12.primary{
  background:
    linear-gradient(
      135deg,
      #123e62,
      #174f79
    );

  box-shadow:
    0 6px 14px
    rgba(17,60,92,.14);
}


.grade-selector-btn-v12.secondary{
  background:
    linear-gradient(
      135deg,
      #168c8c,
      #159c96
    );

  box-shadow:
    0 6px 14px
    rgba(22,140,140,.13);
}


.grade-selector-btn-v12>span{
  width:18px;
  height:18px;

  display:grid;

  place-items:center;

  border-radius:6px;

  background:
    rgba(255,255,255,.13);

  font-size:9px;
}


/* EMPTY */

.grade-selector-card-v12.status-empty{
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f7f9fa
    );
}


/* RESPONSIVE */

@media(max-width:1200px){

  .grade-selector-grid-v12{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


@media(max-width:850px){

  .grade-selector-grid-v12{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:560px){

  .grade-selector-panel-v12{
    padding:14px;
  }


  .grade-selector-grid-v12{
    grid-template-columns:1fr;
  }


  .grade-selector-actions-v12{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   GRADE SELECTOR VISUAL V1.3
   Border lebih tegas + background tidak polos
   ========================================================= */

.grade-selector-card-v12{
  border:1.5px solid #c9d7e2 !important;
  background:
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f4f8fb 100%
    ) !important;
  box-shadow:
    0 14px 34px rgba(18,62,98,.08),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  position:relative;
}

.grade-selector-card-v12::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:18px;
  background:
    radial-gradient(
      circle at top right,
      rgba(255,255,255,.65) 0%,
      rgba(255,255,255,0) 32%
    );
}

.grade-selector-card-v12:hover{
  border-color:#9fb8ca !important;
  box-shadow:
    0 20px 44px rgba(18,62,98,.14),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}


/* STATUS READY / SIAP INPUT */
.grade-selector-card-v12.status-ready{
  border-color:#87cfc6 !important;
  background:
    linear-gradient(
      180deg,
      #f8fffe 0%,
      #eefaf8 100%
    ) !important;
}

.grade-selector-card-v12.status-ready .grade-selector-stats-v12 > div{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.96),
      rgba(240,252,249,.96)
    ) !important;
  border-color:#cfe8e3 !important;
}


/* STATUS DONE / NILAI TUNTAS */
.grade-selector-card-v12.status-done{
  border-color:#dfbe67 !important;
  background:
    linear-gradient(
      180deg,
      #fffdf6 0%,
      #fff7df 100%
    ) !important;
}

.grade-selector-card-v12.status-done .grade-selector-stats-v12 > div{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.97),
      rgba(255,248,226,.96)
    ) !important;
  border-color:#ead79f !important;
}


/* STATUS EMPTY / BELUM ADA DATA */
.grade-selector-card-v12.status-empty{
  border-color:#cfd8e1 !important;
  background:
    linear-gradient(
      180deg,
      #fbfcfe 0%,
      #f2f6fa 100%
    ) !important;
}

.grade-selector-card-v12.status-empty .grade-selector-stats-v12 > div{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.96),
      rgba(244,247,250,.96)
    ) !important;
  border-color:#dde5eb !important;
}


/* TOP STRIP AGAR LEBIH TERLIHAT */
.grade-selector-accent-v12{
  height:5px !important;
  opacity:.98;
}


/* TITLE DAN META SEDIKIT DIPERTEGAS */
.grade-selector-title-v12 h3{
  color:#123b5d !important;
}

.grade-selector-progress-meta-v12{
  color:#81909c !important;
}

.grade-selector-progress-meta-v12 strong{
  color:#4f6473 !important;
}


/* STAT BOX LEBIH TERLIHAT */
.grade-selector-stats-v12 > div{
  border:1px solid #d9e4eb !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92);
}


/* GARIS ACTION AREA */
.grade-selector-actions-v12{
  border-top:1px solid rgba(18,62,98,.10) !important;
}


/* BADGE STATUS SUPAYA TIDAK TERLALU FLAT */
.grade-selector-status-v12{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7);
}


/* MOBILE TETAP AMAN */
@media(max-width:560px){
  .grade-selector-card-v12{
    border-radius:16px !important;
  }
}



/* =========================================================
   GRADE EXCEL DOWNLOAD PREMIUM V1
   ========================================================= */

.grade-excel-download-btn-v1{
  display:inline-flex;

  align-items:center;

  gap:11px;

  min-height:50px;

  padding:
    8px 15px 8px 9px;

  border:
    1px solid #b9dcd8;

  border-radius:
    12px;

  background:
    linear-gradient(
      135deg,
      #effaf8 0%,
      #e4f6f3 100%
    );

  color:#126f70;

  box-shadow:
    0 7px 18px
    rgba(22,140,140,.08);

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}


.grade-excel-download-btn-v1:hover{
  transform:
    translateY(-2px);

  border-color:
    #83c9c1;

  background:
    linear-gradient(
      135deg,
      #e8f8f5,
      #d9f2ee
    );

  box-shadow:
    0 11px 24px
    rgba(22,140,140,.14);
}


.grade-excel-download-icon-v1{
  width:34px;
  height:34px;

  flex:
    0 0 34px;

  display:grid;

  place-items:center;

  border-radius:
    9px;

  background:
    linear-gradient(
      135deg,
      #168c8c,
      #18a29b
    );

  color:#fff;

  font-size:17px;

  font-weight:900;

  box-shadow:
    0 5px 12px
    rgba(22,140,140,.18);
}


.grade-excel-download-copy-v1{
  display:block;

  min-width:0;

  line-height:1.15;
}


.grade-excel-download-copy-v1 strong{
  display:block;

  color:#135f68;

  font-size:12px;

  font-weight:900;

  white-space:nowrap;
}


.grade-excel-download-copy-v1 small{
  display:block;

  margin-top:4px;

  color:#789397;

  font-size:9px;

  font-weight:700;
}


@media(max-width:600px){

  .grade-excel-download-btn-v1{
    width:100%;

    justify-content:flex-start;
  }

}


/* =========================================================
   GRADE EXCEL UPLOAD PREMIUM V1
   ========================================================= */

/* FORM AREA */

.grade-excel-import-form{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) auto;

  align-items:end;

  gap:12px;
}


.grade-excel-import-form label{
  min-width:0;

  color:#34536a;

  font-size:11px;

  font-weight:900;
}


/* FILE INPUT */

.grade-excel-import-form input[type="file"]{
  min-height:54px;

  padding:7px;

  border:
    1px solid #cbdbe5;

  border-radius:12px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f6f9fb
    );

  color:#627583;

  font-size:11px;

  font-weight:700;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.9);

  cursor:pointer;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}


.grade-excel-import-form input[type="file"]:hover{
  border-color:#9ecbc7;

  background:#fbfefe;
}


.grade-excel-import-form input[type="file"]:focus{
  border-color:#168c8c;

  box-shadow:
    0 0 0 3px
    rgba(22,140,140,.10);
}


/* BUTTON DI DALAM FILE INPUT */

.grade-excel-import-form
input[type="file"]::file-selector-button{
  min-height:38px;

  margin-right:11px;

  padding:
    7px 13px;

  border:0;

  border-radius:9px;

  background:
    linear-gradient(
      135deg,
      #e5f7f4,
      #d8f1ed
    );

  color:#117b79;

  font-size:10.5px;

  font-weight:900;

  cursor:pointer;

  transition:
    background .15s ease,
    transform .15s ease;
}


.grade-excel-import-form
input[type="file"]::file-selector-button:hover{
  background:
    linear-gradient(
      135deg,
      #d9f2ee,
      #ccebe6
    );
}


/* UPLOAD BUTTON */

.grade-excel-import-form button[type="submit"]{
  position:relative;

  min-height:54px;

  padding:
    10px 17px 10px 46px;

  border:0;

  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      #123f64,
      #174f79
    );

  color:#fff;

  font-size:11px;

  font-weight:900;

  white-space:nowrap;

  box-shadow:
    0 8px 20px
    rgba(18,63,100,.16);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}


.grade-excel-import-form button[type="submit"]::before{
  content:"↑";

  position:absolute;

  left:11px;
  top:50%;

  transform:
    translateY(-50%);

  width:27px;
  height:27px;

  display:grid;

  place-items:center;

  border-radius:8px;

  background:
    rgba(255,255,255,.12);

  font-size:15px;

  font-weight:900;
}


.grade-excel-import-form button[type="submit"]:hover{
  transform:
    translateY(-2px);

  box-shadow:
    0 12px 26px
    rgba(18,63,100,.22);

  filter:none;
}


/* FILE AREA LEBIH RAPAT DENGAN DOWNLOAD CARD */

.grade-excel-body{
  align-items:center;
}


/* RESPONSIVE */

@media(max-width:760px){

  .grade-excel-import-form{
    grid-template-columns:1fr;
  }


  .grade-excel-import-form button[type="submit"]{
    width:100%;
  }

}


/* =========================================================
   QR APPROVAL HEAD STYLE V1
   ========================================================= */

.nurul-signatures
> .nurul-signature-head-approval-v1{
  min-height:28mm !important;

  display:flex !important;

  flex-direction:column !important;

  justify-content:flex-start !important;

  align-items:center !important;
}


.nurul-signatures
> .nurul-signature-head-approval-v1
> span{
  display:block !important;

  min-height:5mm;

  font-size:7.8pt;

  text-align:center;
}


.nurul-head-approval-qr-v1{
  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  margin-top:.5mm;
}


.nurul-head-approval-qr-v1 img{
  display:block;

  width:18mm !important;

  height:18mm !important;

  margin:0 !important;

  padding:.7mm !important;

  box-sizing:border-box;

  object-fit:contain;

  border:
    1px solid #bccacf;

  border-radius:1mm;

  background:#fff;
}


.nurul-head-approval-qr-v1 small{
  display:block;

  margin-top:.7mm;

  color:#60757d;

  font-size:5.4pt;

  line-height:1;

  font-weight:900;

  letter-spacing:.04em;

  white-space:nowrap;
}


.nurul-signatures
> .nurul-signature-head-approval-v1
> strong{
  display:block !important;

  width:100%;

  padding-top:1.2mm !important;

  font-size:8pt;

  line-height:1.15;

  text-align:center;

  text-decoration:underline;
}


@media print{

  .nurul-signatures
  > .nurul-signature-head-approval-v1{
    justify-content:flex-start !important;

    min-height:28mm !important;

    break-inside:avoid !important;

    page-break-inside:avoid !important;
  }


  .nurul-head-approval-qr-v1 img{
    width:18mm !important;

    height:18mm !important;

    print-color-adjust:exact !important;

    -webkit-print-color-adjust:exact !important;
  }


  .nurul-signatures
  > .nurul-signature-head-approval-v1
  > strong{
    padding-top:1.2mm !important;
  }

}


/* =========================================================
   QR KEPALA MADRASAH COMPACT V2
   QR lebih kecil + nama langsung di bawah QR
   ========================================================= */

.nurul-signatures
> .nurul-signature-head-approval-v1{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;

  min-height:0 !important;
  height:auto !important;

  padding:0 !important;
  margin:0 !important;

  gap:0 !important;
}


.nurul-signatures
> .nurul-signature-head-approval-v1
> span{
  display:block !important;

  min-height:0 !important;

  margin:0 0 1mm 0 !important;
  padding:0 !important;

  font-size:7.8pt !important;
  line-height:1.1 !important;
}


.nurul-head-approval-qr-v1{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  width:auto !important;
  height:auto !important;

  margin:0 !important;
  padding:0 !important;
}


.nurul-head-approval-qr-v1 img{
  display:block !important;

  width:15mm !important;
  height:15mm !important;

  margin:0 !important;
  padding:.5mm !important;

  box-sizing:border-box !important;

  object-fit:contain !important;

  border:
    1px solid #bccacf !important;

  border-radius:.8mm !important;

  background:#fff !important;
}


.nurul-signatures
> .nurul-signature-head-approval-v1
> strong{
  display:block !important;

  width:100% !important;

  margin:1.5mm 0 0 0 !important;
  padding:0 !important;

  min-height:0 !important;

  font-size:8pt !important;
  line-height:1.15 !important;

  text-align:center !important;

  text-decoration:underline !important;
}


@media print{

  .nurul-signatures
  > .nurul-signature-head-approval-v1{
    display:flex !important;

    flex-direction:column !important;

    justify-content:flex-start !important;

    align-items:center !important;

    min-height:0 !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    break-inside:avoid !important;
    page-break-inside:avoid !important;
  }


  .nurul-head-approval-qr-v1 img{
    width:15mm !important;
    height:15mm !important;

    margin:0 !important;

    print-color-adjust:exact !important;
    -webkit-print-color-adjust:exact !important;
  }


  .nurul-signatures
  > .nurul-signature-head-approval-v1
  > strong{
    margin-top:1.5mm !important;

    padding:0 !important;
  }

}


/* =========================================================
   QR KEPALA - FIX POSISI NAMA V3
   Override selector generic tanda tangan
   ========================================================= */

.nurul-signatures
> div.nurul-signature-head-approval-v1{
  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:flex-start !important;

  min-height:0 !important;

  height:auto !important;

  margin:0 !important;

  padding:0 !important;

  gap:0 !important;

  transform:none !important;
}


.nurul-signatures
> div.nurul-signature-head-approval-v1
> span{
  display:block !important;

  min-height:0 !important;

  height:auto !important;

  margin:0 0 1mm 0 !important;

  padding:0 !important;

  font-size:7.8pt !important;

  line-height:1.1 !important;
}


.nurul-signatures
> div.nurul-signature-head-approval-v1
> .nurul-head-approval-qr-v1{
  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:flex-start !important;

  width:auto !important;

  height:auto !important;

  margin:0 !important;

  padding:0 !important;
}


.nurul-signatures
> div.nurul-signature-head-approval-v1
> .nurul-head-approval-qr-v1
> img{
  display:block !important;

  width:15mm !important;

  height:15mm !important;

  margin:0 !important;

  padding:.5mm !important;

  object-fit:contain !important;
}


/*
 * PENTING:
 * selector dibuat setara/lebih kuat dari:
 *
 * .nurul-signatures
 * > div:not(.nurul-signature-qr-v3)
 * > strong
 */
.nurul-signatures
> div.nurul-signature-head-approval-v1
> strong{
  display:block !important;

  width:100% !important;

  min-height:0 !important;

  height:auto !important;

  margin:1.5mm 0 0 0 !important;

  padding:0 !important;

  position:static !important;

  align-self:center !important;

  font-size:8pt !important;

  line-height:1.15 !important;

  text-align:center !important;

  text-decoration:underline !important;
}


@media print{

  .nurul-signatures
  > div.nurul-signature-head-approval-v1{
    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:flex-start !important;

    min-height:0 !important;

    height:auto !important;

    margin:0 !important;

    padding:0 !important;
  }


  .nurul-signatures
  > div.nurul-signature-head-approval-v1
  > strong{
    min-height:0 !important;

    height:auto !important;

    margin:1.5mm 0 0 0 !important;

    padding:0 !important;
  }

}


/* =========================================================
   QR KEPALA MADRASAH SIZE V4
   Ukuran ideal setelah posisi nama diperbaiki
   ========================================================= */

.nurul-signatures
> div.nurul-signature-head-approval-v1
> .nurul-head-approval-qr-v1
> img{
  width:19mm !important;
  height:19mm !important;
}


.nurul-signatures
> div.nurul-signature-head-approval-v1
> .nurul-head-approval-qr-v1{
  margin-top:1mm !important;
}


.nurul-signatures
> div.nurul-signature-head-approval-v1
> strong{
  margin-top:1.5mm !important;
}


@media print{

  .nurul-signatures
  > div.nurul-signature-head-approval-v1
  > .nurul-head-approval-qr-v1
  > img{
    width:19mm !important;
    height:19mm !important;
  }

}


/* =========================================================
   QR KEPALA MADRASAH SIZE V5
   Fine tune 19mm -> 18mm
   ========================================================= */

.nurul-signatures
> div.nurul-signature-head-approval-v1
> .nurul-head-approval-qr-v1
> img{
  width:18mm !important;
  height:18mm !important;
}

@media print{
  .nurul-signatures
  > div.nurul-signature-head-approval-v1
  > .nurul-head-approval-qr-v1
  > img{
    width:18mm !important;
    height:18mm !important;
  }
}