/* =====================================================================
   MMU IBTIDAIYAH — Gaya halaman depan (PPMB, Pembayaran IMDA, Kitab)
   Diselaraskan dengan halaman login: latar #eef3f1, aksen gradasi
   cyan-hijau-lime, kartu membulat, font Space Grotesk.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root{
	--fp-bg:#eef3f1;
	--fp-panel:#ffffff;
	--fp-line:rgba(15,90,74,.13);
	--fp-line-2:rgba(15,90,74,.30);
	--fp-text:#12241f;
	--fp-muted:#5f746d;
	--fp-cyan:#0891b2;
	--fp-green:#15a34a;
	--fp-lime:#7cb305;
	--fp-grad:linear-gradient(120deg,#0891b2,#15a34a 55%,#7cb305);
	--fp-font:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

/* ---------- Dasar ---------- */
body{ background:var(--fp-bg) !important; color:var(--fp-text); font-family:var(--fp-font); }
body, h1,h2,h3,h4,h5,h6, p,label,a,li,td,th,small,strong,b,
.form-control,input,select,textarea,button,.btn,
.box-title,.modal-title,.content-header h1,.nav > li > a,.table,table,.label,.alert{
	font-family:var(--fp-font);
}
/* ikon jangan disentuh */
.fa,.fab,.far,.fas,[class^="fa-"],[class*=" fa-"]{ font-family:FontAwesome !important; }
.ion,[class^="ion-"],[class*=" ion-"]{ font-family:Ionicons !important; }
.glyphicon,[class^="glyphicon-"]{ font-family:"Glyphicons Halflings" !important; }

/* ---------- Header atas (Pembayaran IMDA & Kitab) ---------- */
.main-header{ background:var(--fp-panel) !important; border-bottom:1px solid var(--fp-line) !important;
	box-shadow:0 2px 10px rgba(10,60,50,.04) !important; }
.main-header .navbar{ background:var(--fp-panel) !important; position:relative; }
.main-header .navbar:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; pointer-events:none;
	background:var(--fp-grad); }
.main-header .navbar .navbar-brand,
.main-header .navbar .navbar-brand:hover{ color:var(--fp-text) !important; font-weight:700; letter-spacing:-.01em; }
.main-header .navbar .nav > li > a{ color:var(--fp-text) !important; border-radius:10px; margin:6px 3px;
	transition:background .18s ease,color .18s ease; }
.main-header .navbar .nav > li > a:hover{ background:rgba(15,90,74,.06) !important; color:var(--fp-green) !important; }
.content-wrapper{ background:transparent !important; }
.content-header > h1{ font-weight:700; color:var(--fp-text); }
.content-header > h1 > small{ color:var(--fp-muted); }

/* ---------- Kartu / kotak ---------- */
.box{ background:var(--fp-panel); border:1px solid var(--fp-line); border-top-width:3px;
	border-radius:16px; box-shadow:0 14px 34px -26px rgba(10,60,50,.55); }
.box.box-primary{ border-top-color:var(--fp-cyan); }
.box.box-success{ border-top-color:var(--fp-green); }
.box.box-info{ border-top-color:#38bdf8; }
.box-header{ border-top-left-radius:16px; border-top-right-radius:16px; }
.box-header .box-title{ font-weight:700; color:var(--fp-text); }
.box-footer{ border-bottom-left-radius:16px; border-bottom-right-radius:16px; }

/* ---------- Tombol ---------- */
.btn{ border-radius:10px; font-weight:600; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.btn-flat{ border-radius:10px !important; }
.btn-lg{ border-radius:12px; }
.btn-success,.btn-primary{
	background:var(--fp-grad) !important; border:0 !important; color:#fff !important;
	box-shadow:0 12px 26px -14px rgba(21,163,74,.85);
}
.btn-success:hover,.btn-primary:hover,
.btn-success:focus,.btn-primary:focus{ filter:brightness(1.06); transform:translateY(-1px); color:#fff !important; }
.btn-warning{ background:#f59e0b !important; border:0 !important; color:#fff !important;
	box-shadow:0 12px 26px -14px rgba(245,158,11,.85); }
.btn-warning:hover{ filter:brightness(1.06); transform:translateY(-1px); color:#fff !important; }
.btn-default{ background:var(--fp-panel); border:1px solid var(--fp-line); color:var(--fp-text); }
.btn-default:hover{ border-color:var(--fp-line-2); background:#f7fbfa; }

/* ---------- Isian ---------- */
.form-control{ border-radius:10px; border-color:#dde7e3; box-shadow:none; color:var(--fp-text); }
.form-control:focus{ border-color:var(--fp-green); box-shadow:0 0 0 3px rgba(21,163,74,.14); }
.input-group-addon{ border-radius:10px 0 0 10px; background:#f4f8f7; border-color:#dde7e3; color:var(--fp-green); }
label{ color:var(--fp-text); font-weight:600; }
select.form-control{ border-radius:10px; }

/* ---------- Tabel ---------- */
.table > thead > tr > th{ border-bottom:2px solid #e4ecea !important; color:#3a524a; font-weight:700; }
.table > tbody > tr > td{ border-top-color:#eef3f1 !important; }
.table-hover > tbody > tr:hover{ background:#f2faf7 !important; }
.table td,.table th{ font-variant-numeric:tabular-nums; }

/* ---------- Label & peringatan ---------- */
.label{ border-radius:8px; padding:4px 10px; font-weight:700; }
.alert{ border-radius:12px; border-width:1px; }
.alert-success{ background:rgba(21,163,74,.10); border-color:rgba(21,163,74,.28); color:#0f6a35; }
.alert-danger{ background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.28); color:#8f2b22; }
.alert-warning{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.3); color:#8a5a08; }
.alert-info{ background:rgba(8,145,178,.10); border-color:rgba(8,145,178,.28); color:#0b6a80; }

/* ---------- Modal ---------- */
.modal-content{ border:0; border-radius:18px; box-shadow:0 30px 70px -30px rgba(10,60,50,.7); }
.modal-header{ border-top-left-radius:18px; border-top-right-radius:18px; border-color:var(--fp-line); }
.modal-footer{ border-color:var(--fp-line); }

/* ---------- PPMB: penanda langkah ---------- */
.f1-step p{ color:var(--fp-muted) !important; font-weight:600; }
.f1-step.active p{ color:var(--fp-green) !important; }
.f1-step .f1-step-icon,
.f1-step-icon{ border-radius:50% !important; }
.f1-step.active .f1-step-icon{ background:var(--fp-grad) !important; color:#fff !important;
	box-shadow:0 10px 22px -12px rgba(21,163,74,.9); }
.f1-progress-line{ background:var(--fp-grad) !important; }
.f1-steps{ margin-top:20px; }

/* ---------- Cetak: kembalikan font asli ---------- */
@media print{
	body,body *{ font-family:"Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif !important; }
	.fa,[class^="fa-"],[class*=" fa-"]{ font-family:FontAwesome !important; }
}

/* ---------- PPMB: kepala halaman (Bootstrap 5 .bg-success) ---------- */
main > .bg-success{
	background:var(--fp-grad) !important;
	border-radius:0 0 26px 26px;
	box-shadow:0 18px 40px -28px rgba(21,163,74,.9);
	padding-top:26px !important; padding-bottom:22px !important;
}
main > .bg-success h1{ font-weight:800; letter-spacing:-.01em; }
main > .bg-success h4{ font-weight:500; opacity:.95; }

/* PPMB memakai Bootstrap 5 -> samakan sudut isian & tombolnya juga */
.form-control-lg{ border-radius:12px !important; }
.f1-buttons .btn-lg{ border-radius:12px !important; }

/* =====================================================================
   Penyegaran IMDA & KITAB — hanya WARNA/SUDUT/EFEK (tata letak tak disentuh)
   ===================================================================== */
/* judul halaman */
.content-header{ padding:18px 15px 6px !important; }
.content-header > h1{ font-size:26px; font-weight:800; letter-spacing:-.02em; }
.content-header > h1 > small{ font-weight:500; }
.content-header .breadcrumb{ background:#fff; border:1px solid var(--fp-line);
	border-radius:999px; padding:6px 14px; box-shadow:0 3px 12px -10px rgba(10,60,50,.6); }
.content-header .breadcrumb > li > a{ color:var(--fp-green); }

/* merek di header atas */
.main-header .navbar .navbar-brand{ font-size:18px; }
.main-header .navbar .navbar-brand b{
	background:var(--fp-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* kepala kotak: beri warna lembut + garis gradasi tipis */
.box > .box-header{
	background:linear-gradient(180deg,#f7fbfa 0%,#ffffff 100%);
	border-bottom:1px solid var(--fp-line);
	padding:14px 16px;
}
.box > .box-header .box-title{ font-size:16px; letter-spacing:-.01em; }
.box > .box-body{ padding:16px; }

/* kotak filter di kepala (select & input) jadi pil rapi */
.box-header .form-control,
.box-header select.form-control{ height:38px; border-radius:10px; background:#fff; }
.box-header .input-group-addon{ background:#f4f8f7; border-radius:10px 0 0 10px; }
.box-header .btn{ height:38px; border-radius:10px; }

/* tabel hasil */
.table > thead > tr > th{ background:#f6faf9; }
.table-bordered,.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td{ border-color:#e8efec !important; }
.table > tbody > tr > td{ vertical-align:middle; }

/* nomor halaman */
.pagination > li > a{ color:var(--fp-green); border-color:#e2ebe8; border-radius:10px !important; margin:0 2px; }
.pagination > .active > a,.pagination > .active > span,
.pagination > .active > a:hover,.pagination > .active > span:hover{
	background:var(--fp-green); border-color:var(--fp-green); }

/* layar kecil */
@media (max-width:767px){
	.content-header > h1{ font-size:20px; }
	.box > .box-body{ padding:12px; }
	.box-header .form-control,.box-header .btn{ margin-bottom:6px; }
}

/* ---------- Isi tabel rata tengah + tampilan lebih hidup ---------- */
#divPageData table > thead > tr > th,
#divPageData table > tbody > tr > td,
.box-body table > thead > tr > th,
.box-body table > tbody > tr > td{
	text-align:center !important;
	vertical-align:middle !important;
}
#divPageData table,.box-body .table{
	border-radius:14px; overflow:hidden; border-collapse:separate; border-spacing:0;
	box-shadow:0 10px 26px -22px rgba(10,60,50,.55);
}
#divPageData table > thead > tr > th,
.box-body .table > thead > tr > th{
	background:linear-gradient(180deg,#f2f8f6,#eaf3f0) !important;
	color:#33504a !important; font-weight:700; font-size:12px;
	letter-spacing:.06em; text-transform:uppercase; padding:12px 10px !important;
	border-bottom:2px solid #dfeae6 !important;
}
/* selang-seling MENGIKUTI NOMOR (ganjil/genap), bukan urutan baris */
#divPageData tr.zebra-ganjil > td,.box-body tr.zebra-ganjil > td{ background:#ffffff; }
#divPageData tr.zebra-genap  > td,.box-body tr.zebra-genap  > td{ background:#f3f8f6; }
#divPageData table > tbody > tr,
.box-body .table > tbody > tr{ transition:background .18s ease, box-shadow .18s ease; }
/* satu data bisa terdiri >1 baris -> sorot seluruh kelompok sekaligus */
#divPageData tr.grup-sorot > td,.box-body tr.grup-sorot > td{ background:#e9f7f1 !important; }
#divPageData table > tbody > tr > td,
.box-body .table > tbody > tr > td{ padding:11px 10px !important; font-size:13.5px; }

/* angka/nominal lebih tegas */
#divPageData table > tbody > tr > td:last-child,
.box-body .table > tbody > tr > td:last-child{ font-weight:700; color:#12241f; }

/* label status di dalam tabel jadi pil */
#divPageData .label,.box-body .label{ display:inline-block; border-radius:999px; padding:5px 12px; font-size:11px; }