/* ==========================================================================
e-GURU (Administrasi Guru Digital) — tema resmi madrasah/sekolah Islam
Hijau tua + maroon + aksen emas. Garis & bingkai ganda agar terkesan formal.
========================================================================== */
:root{
/* hijau tua (utama) */
--hijau-tua:#0b4a33;
--hijau:#106b4a;
--hijau-terang:#178a5f;
--hijau-muda:#e7f2ec;
/* maroon (aksen kedua) */
--maroon:#6d1b25;
--maroon-terang:#8d2733;
/* emas (aksen mewah) */
--emas:#c9a227;
--emas-terang:#e3c368;
--emas-muda:#fbf4dd;
--ink:#16261f;
--muted:#5c6b63;
--line:rgba(11,74,51,.18);
--card:rgba(255,255,255,.92);
--kertas:#fbf9f2;
--radius:14px;
--radius-sm:9px;
--shadow:0 14px 30px -18px rgba(11,74,51,.45), 0 2px 6px -3px rgba(11,74,51,.18);
--sidebar-w:288px;
--serif:Georgia,"Times New Roman",'Playfair Display',serif;
/* alias kompatibilitas: beberapa isian memakai accent-color:var(--accent) */
--accent:var(--hijau);
--accent2:var(--emas);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;
color:var(--ink);
background:var(--kertas);
font-size:15px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
min-height:100vh;
}
a{color:var(--hijau);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:700;letter-spacing:-.01em;color:var(--hijau-tua)}
h1{font-size:1.42rem;font-family:var(--serif)}
h2{font-size:1.1rem;font-family:var(--serif)}
h3{font-size:1rem}
svg.ic{flex:0 0 auto}
/* latar: pola geometris islami halus + gradien hijau/emas */
.bg-deco{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:
linear-gradient(180deg,#f8fbf7 0%,#fbf9f2 55%,#f6f3e6 100%)}
.bg-deco::before{
content:"";position:absolute;inset:0;opacity:.5;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%230b4a33' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M42 2l40 40-40 40L2 42z'/%3E%3Cpath d='M42 14l28 28-28 28-28-28z'/%3E%3Ccircle cx='42' cy='42' r='7'/%3E%3C/g%3E%3C/svg%3E");
background-size:84px 84px;
}
.bg-deco span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.34}
.bg-deco .b1{width:540px;height:540px;background:#63b48d;top:-180px;left:-140px}
.bg-deco .b2{width:430px;height:430px;background:#e3c368;top:16%;right:-150px;opacity:.3}
.bg-deco .b3{width:560px;height:560px;background:#8d2733;bottom:-280px;left:30%;opacity:.14}
/* ===== Sidebar ===== */
.sidebar{
position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
padding:20px 15px;display:flex;flex-direction:column;gap:16px;
background:linear-gradient(165deg,#0a4530 0%,#0b4a33 45%,#0e5738 100%);
border-right:3px double var(--emas);z-index:40;overflow-y:auto;
color:#eaf3ee;
}
.sidebar::-webkit-scrollbar{width:9px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(201,162,39,.5);border-radius:9px}
.brand{display:flex;align-items:center;gap:12px;padding:2px 6px 8px;border-bottom:1px solid rgba(201,162,39,.35)}
.brand-logo{
width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:var(--hijau-tua);
background:linear-gradient(150deg,var(--emas-terang),var(--emas));
box-shadow:0 8px 20px -10px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.4);
}
.brand-name{font-weight:800;font-size:1.03rem;letter-spacing:-.01em;color:#fff;font-family:var(--serif)}
.brand-sub{font-size:.72rem;color:rgba(234,243,238,.72);max-width:176px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* kotak konteks sekolah */
.ctx-box{
background:rgba(255,255,255,.08);border:1px solid rgba(201,162,39,.4);border-left:3px solid var(--emas);
border-radius:var(--radius-sm);padding:10px 12px;
}
.ctx-nama{font-weight:700;font-size:.86rem;color:#fff;line-height:1.3}
.ctx-ket{font-size:.7rem;color:rgba(234,243,238,.72);margin-top:3px}
.nav{display:flex;flex-direction:column;gap:3px}
.nav-sec{
font-size:.66rem;text-transform:uppercase;letter-spacing:.11em;color:var(--emas-terang);
font-weight:700;margin:14px 8px 6px;padding-bottom:4px;border-bottom:1px solid rgba(201,162,39,.3);
}
.nav-item{
display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
color:#eaf3ee;font-size:.88rem;font-weight:500;transition:.16s;border:1px solid transparent;
}
.nav-item:hover{background:rgba(255,255,255,.12);text-decoration:none;border-color:rgba(201,162,39,.45)}
.nav-item.on{
background:linear-gradient(120deg,rgba(201,162,39,.95),rgba(227,195,104,.9));color:#3a2c05;
font-weight:700;border-color:rgba(255,255,255,.4);box-shadow:0 8px 18px -12px rgba(0,0,0,.8);
}
.nav-item.on svg{color:#3a2c05}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(201,162,39,.35);padding-top:14px}
.who{display:flex;align-items:center;gap:10px;padding:0 4px}
.who-txt{min-width:0}
.who-txt strong{display:block;font-size:.84rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.who-txt small{color:rgba(234,243,238,.75);font-size:.71rem}
.sidebar .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(201,162,39,.45);color:#fff}
.sidebar .btn-ghost:hover{background:rgba(255,255,255,.2)}
.avatar{
width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--hijau-tua);font-weight:800;font-size:.9rem;
background:linear-gradient(150deg,var(--emas-terang),var(--emas));flex:0 0 auto;border:1px solid rgba(255,255,255,.5);
}
/* ===== Main ===== */
.main{margin-left:var(--sidebar-w);padding:24px 30px 40px;min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:10px;
padding-bottom:14px;border-bottom:3px double var(--emas)}
.topbar-sub{margin:6px 0 0;color:var(--muted);font-size:.82rem}
.topbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.content{display:flex;flex-direction:column;gap:24px;flex:1;margin-top:16px}
.foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.75rem;
margin-top:32px;padding-top:14px;border-top:3px double var(--emas)}
/* ===== Kartu ===== */
.card{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);padding:20px 22px;position:relative;
}
.card::before{ /* garis emas dekoratif di atas kartu */
content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px;
background:linear-gradient(90deg,var(--hijau-tua),var(--emas) 45%,var(--maroon));
opacity:.85;
}
.card-tight{padding:15px 17px}
.card-terpilih{border-color:var(--emas);box-shadow:0 0 0 2px rgba(201,162,39,.35),var(--shadow)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.card-head p{margin:4px 0 0;color:var(--muted);font-size:.82rem}
.section-title{display:flex;align-items:center;gap:9px;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;
color:var(--hijau-tua);font-weight:700;padding-bottom:5px;border-bottom:1px solid rgba(201,162,39,.45)}
.danger-zone{border-color:rgba(109,27,37,.4)}
.danger-zone > summary{color:var(--maroon)}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
/* stat */
.stat{display:flex;gap:14px;align-items:flex-start}
.stat-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
color:var(--emas-muda);background:linear-gradient(150deg,var(--hijau-tua),var(--hijau));
border:1px solid var(--emas)}
.stat-ic.g{background:linear-gradient(150deg,#0f7a53,#0b4a33)}
.stat-ic.o{background:linear-gradient(150deg,#a9741b,#8a5a12);color:#fff8e6}
.stat-ic.p{background:linear-gradient(150deg,var(--maroon-terang),var(--maroon));color:#fdf1f1}
.stat-ic.s{background:linear-gradient(150deg,#1d6f8b,#14556b);color:#eef9fd}
.stat-num{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--hijau-tua);font-variant-numeric:tabular-nums}
.stat-lbl{color:var(--muted);font-size:.78rem;margin-top:3px}
.stat-hint{font-size:.73rem;color:var(--muted);margin-top:6px}
.stat-mini{display:flex;gap:12px;flex-wrap:wrap}
.stat-mini div{min-width:94px;border:1px solid var(--line);border-top:2px solid var(--emas);border-radius:10px;padding:9px 13px;background:rgba(255,255,255,.75)}
.stat-mini b{display:block;font-size:1.14rem;font-weight:800;line-height:1.2;color:var(--hijau-tua);font-variant-numeric:tabular-nums}
.stat-mini span{font-size:.73rem;color:var(--muted)}
/* ===== Tombol ===== */
.btn{
display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:10px;border:1px solid transparent;
font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:.16s;background:#fff;color:var(--hijau-tua);
white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{
background:linear-gradient(150deg,var(--hijau),var(--hijau-tua));color:#fff;
box-shadow:0 10px 20px -12px rgba(11,74,51,.95);border-color:rgba(201,162,39,.55);
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--hijau-tua)}
.btn-ghost:hover{border-color:var(--emas);background:var(--emas-muda)}
.btn-danger{background:rgba(109,27,37,.07);color:var(--maroon);border-color:rgba(109,27,37,.35)}
.btn-danger:hover{background:rgba(109,27,37,.14)}
.btn-ok{background:rgba(15,122,83,.1);color:#0b5c3f;border-color:rgba(15,122,83,.32)}
.btn-sm{padding:7px 11px;font-size:.78rem;border-radius:8px}
.btn.full{width:100%;justify-content:center}
.btn-ico{padding:7px;border-radius:8px}
/* ===== Tabel ===== */
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--line)}
table.tbl{width:100%;border-collapse:collapse;font-size:.86rem;background:#fff}
table.tbl th{
text-align:left;padding:11px 13px;font-size:.71rem;text-transform:uppercase;letter-spacing:.06em;
color:#fdf8ea;font-weight:700;background:linear-gradient(160deg,var(--hijau),var(--hijau-tua));
border-bottom:2px solid var(--emas);white-space:nowrap;
}
table.tbl td{padding:11px 13px;border-bottom:1px solid rgba(11,74,51,.12);vertical-align:middle}
table.tbl tbody tr:nth-child(even) td{background:rgba(231,242,236,.45)}
table.tbl tbody tr:hover td{background:var(--emas-muda)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .ctr{text-align:center}
.tbl-sub{display:block;color:var(--muted);font-size:.74rem;margin-top:2px}
.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
/* ===== Badge / pill ===== */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.73rem;font-weight:700;border:1px solid transparent}
.pill-A,.pill-ok{background:rgba(15,122,83,.13);color:#0b5c3f;border-color:rgba(15,122,83,.32)}
.pill-B{background:rgba(29,111,139,.13);color:#14556b;border-color:rgba(29,111,139,.3)}
.pill-C,.pill-warn{background:rgba(201,162,39,.18);color:#7a5c06;border-color:rgba(201,162,39,.45)}
.pill-D{background:rgba(109,27,37,.12);color:#7f1d28;border-color:rgba(109,27,37,.34)}
.pill-gray{background:rgba(92,107,99,.12);color:var(--muted);border-color:rgba(92,107,99,.24)}
.pill-gold{background:linear-gradient(150deg,var(--emas-terang),var(--emas));color:#3f2f05;border-color:rgba(120,92,10,.35)}
.pill-st-H{background:rgba(15,122,83,.15);color:#0b5c3f;border-color:rgba(15,122,83,.3)}
.pill-st-S{background:rgba(201,162,39,.2);color:#7a5c06;border-color:rgba(201,162,39,.45)}
.pill-st-I{background:rgba(29,111,139,.15);color:#14556b;border-color:rgba(29,111,139,.32)}
.pill-st-A{background:rgba(109,27,37,.14);color:#7f1d28;border-color:rgba(109,27,37,.32)}
.bar-mini{height:8px;border-radius:99px;background:rgba(11,74,51,.12);overflow:hidden;min-width:74px;display:block}
.bar-mini i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--hijau-tua),var(--hijau-terang))}
.bar-mini i.lvA{background:linear-gradient(90deg,#0b5c3f,#178a5f)}
.bar-mini i.lvB{background:linear-gradient(90deg,#14556b,#2b8fae)}
.bar-mini i.lvC{background:linear-gradient(90deg,#a9741b,#e3c368)}
.bar-mini i.lvD{background:linear-gradient(90deg,#6d1b25,#a8394a)}
.tagmini{display:inline-block;padding:2px 9px;border-radius:6px;background:var(--hijau-muda);color:var(--hijau-tua);
border:1px solid rgba(11,74,51,.16);font-size:.72rem;font-weight:700;margin:2px 3px 2px 0}
/* ===== Form ===== */
.form-grid{display:grid;gap:16px}
label.f{display:block;font-size:.77rem;font-weight:700;color:var(--hijau-tua);margin-bottom:6px}
input[type=text],input[type=password],input[type=date],input[type=month],input[type=number],input[type=search],select,textarea{
width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(11,74,51,.28);
background:#fff;font:inherit;font-size:.88rem;color:var(--ink);outline:none;transition:.16s;
}
input:focus,select:focus,textarea:focus{border-color:var(--emas);box-shadow:0 0 0 3px rgba(201,162,39,.22)}
textarea{resize:vertical;min-height:72px;line-height:1.5}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b4a33' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
.hint{font-size:.73rem;color:var(--muted);margin-top:6px}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.filterbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.filterbar > div{min-width:150px;flex:0 1 auto}
input[type=file]{
width:100%;padding:9px 11px;border-radius:10px;border:1px dashed rgba(11,74,51,.45);
background:rgba(231,242,236,.6);font:inherit;font-size:.83rem;color:var(--muted);cursor:pointer;
}
input[type=file]:hover{border-color:var(--emas);background:var(--emas-muda)}
/* ===== Alert ===== */
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:11px;margin-bottom:16px;font-size:.86rem;
border:1px solid transparent;border-left-width:4px}
.alert-ok{background:rgba(15,122,83,.09);border-color:rgba(15,122,83,.3);border-left-color:var(--hijau);color:#0b4a33}
.alert-warn{background:rgba(201,162,39,.13);border-color:rgba(201,162,39,.42);border-left-color:var(--emas);color:#6f5406}
.alert-err{background:rgba(109,27,37,.09);border-color:rgba(109,27,37,.32);border-left-color:var(--maroon);color:#7f1d28}
/* ===== Penilaian (butir) & form khusus ===== */
.butir{border:1px solid var(--line);border-left:3px solid var(--emas);border-radius:12px;background:#fff;padding:14px 16px;margin-bottom:12px}
.butir:last-child{margin-bottom:0}
.butir-head{display:flex;gap:12px;align-items:flex-start}
.butir-no{
width:28px;height:28px;border-radius:8px;background:linear-gradient(150deg,var(--hijau),var(--hijau-tua));color:#fff;
display:grid;place-items:center;font-size:.78rem;font-weight:800;flex:0 0 auto;margin-top:1px;border:1px solid var(--emas);
}
.butir-komponen{font-weight:700;font-size:.9rem;color:var(--hijau-tua)}
.butir-indikator{color:var(--muted);font-size:.8rem;margin-top:3px;line-height:1.45}
.skala{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.skala label{
flex:1 1 130px;display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:10px;cursor:pointer;
border:1px solid var(--line);background:#fff;font-size:.79rem;transition:.14s;
}
.skala label:hover{background:var(--emas-muda);border-color:var(--emas)}
.skala input{accent-color:var(--hijau);width:16px;height:16px;margin:0;flex:0 0 auto}
.skala label.sel{background:var(--emas-muda);border-color:var(--emas);font-weight:600}
.butir-note{margin-top:10px}
/* panel tambahan / detail */
details.editbox{margin-top:12px;border-top:1px dashed rgba(11,74,51,.25);padding-top:2px}
details.editbox > summary{
cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
font-size:.78rem;font-weight:700;color:var(--hijau);padding:8px 0 2px;
}
details.editbox > summary::-webkit-details-marker{display:none}
details.editbox > summary::after{content:'▾';font-size:.7rem;color:var(--muted)}
details.editbox[open] > summary::after{content:'▴'}
details.editbox > summary:hover{text-decoration:underline}
.skorlive{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px}
.skorbig{font-size:2.3rem;font-weight:800;letter-spacing:-.03em;line-height:1}
/* kotak logo */
.logo-kotak{
width:104px;height:104px;border-radius:12px;border:2px solid var(--emas);
background:#fff;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;
}
.logo-kotak img{width:100%;height:100%;object-fit:contain;display:block}
.logo-kosong{width:104px;height:104px;border-radius:12px;border:1px dashed rgba(11,74,51,.45);
background:rgba(231,242,236,.6);display:grid;place-items:center;color:var(--muted);flex:0 0 auto}
.foto-baris{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.foto-sisi{display:flex;flex-direction:column;gap:10px;align-items:center;flex:0 0 auto}
.foto-form{flex:1 1 320px;min-width:240px}
.foto-input-baris{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.foto-preview-wrap{display:flex;flex-direction:column;gap:6px;align-items:center}
.foto-preview{width:96px;height:96px;border-radius:12px;overflow:hidden;border:2px solid var(--emas);background:#fff;display:grid;place-items:center}
.foto-preview img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-img{padding:0;overflow:hidden;background:var(--hijau-muda)}
.avatar-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.avatar-besar{box-shadow:0 12px 26px -14px rgba(11,74,51,.7);border:3px solid #fff}
.mini-avatar{display:inline-flex;align-items:center;gap:9px}
.mini-avatar .avatar{font-size:.78rem}
.foto-cetak{width:28mm;height:38mm;border:1px solid #b9b6a8;object-fit:cover;display:block}
/* ===== Log Aktivitas: penanda online ===== */
.dot-online{
flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#10b981;
box-shadow:0 0 0 3px rgba(16,185,129,.22);animation:denyut 2.2s ease-in-out infinite;
}
@keyframes denyut{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.86)}}
/* ===== Tabel nilai (Formatif / Sumatif Lingkup Materi / ASAS) =====
Tabel memakai table-layout:fixed + sehingga lebar setiap kolom
SAMA antara baris judul dan baris isian (tanpa ini judul F1..F4/S1..S4 tidak
sejajar dengan kotak inputnya karena baris judul hanya memuat sel kolom nilai). */
.nil-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--line)}
table.grid{
border-collapse:separate;border-spacing:0;font-size:.84rem;background:#fff;
/* table-layout:fixed + lebar tabel yang dihitung di PHP (lihat nilai.php) sehingga
jumlah lebar semua kolom = lebar tabel. Dengan begitu kolom judul dan kolom isian
SELALU sama lebar, tanpa celah kosong di ujung kanan, dan tabel dipusatkan bila
kartu lebih lebar; bila kolomnya banyak, gulir horizontal ada di .nil-wrap. */
table-layout:fixed;margin:0 auto;
}
table.grid th,table.grid td{
padding:0;vertical-align:middle;border-bottom:1px solid rgba(11,74,51,.12);
text-align:center;overflow:hidden;
}
/* Lebar kolom dinyatakan pada SETIAP sel (kepala maupun isian), bukan hanya ,
supaya baris judul dan baris input selalu sejajar lebar-kolomnya. */
table.grid .c-no{width:40px}
/* Lebar kolom Nama Siswa WAJIB ditulis di sini juga (bukan hanya di ): peramban
memakai lebar pada SEL sebagai penentu utama, sehingga tanpa aturan ini kolom nama
menyesuaikan isi setiap baris (judul 97px, isian 110px → semua kolom angka ikut meleset).
Nilainya harus SAMA dengan $wNama pada nilai.php. */
table.grid .c-nama{width:260px;white-space:normal;overflow:hidden;text-overflow:ellipsis}
table.grid .c-nilai{width:58px}
/* 92px & 76px dipilih agar MELEBIHI lebar minimum teks judulnya ("NILAI AKHIR" ±89px,
"PREDIKAT" ±74px). Kalau kolom lebih sempit dari teks judul yang nowrap, peramban
melebarkan kolom itu → judul dan kotak isian jadi tidak sejajar. */
table.grid .c-na{width:92px}
table.grid .c-pred{width:76px}
/* padding kepala & isian untuk kolom identitas dibuat sama agar lebarnya tidak bergeser */
table.grid th.kiri,table.grid td.kiri{padding-left:12px;padding-right:10px}
table.grid td.kiri{padding-top:8px;padding-bottom:8px}
table.grid th{
font-size:.69rem;text-transform:uppercase;letter-spacing:.04em;color:#fdf8ea;font-weight:700;
background:linear-gradient(160deg,var(--hijau),var(--hijau-tua));
white-space:nowrap;padding:9px 6px;
}
table.grid thead tr:last-child th{border-bottom:2px solid var(--emas)}
/* judul kolom identitas (No & Nama) rata kiri */
table.grid th.kiri,table.grid td.kiri{text-align:left}
table.grid td:first-child,table.grid th:first-child{padding-left:0}
table.grid tbody tr:nth-child(even) td{background:rgba(231,242,236,.4)}
table.grid tbody tr:hover td{background:var(--emas-muda)}
/* kelompok kolom: Formatif (hijau), Sumatif (biru), ASAS (maroon), Nilai Akhir (emas) */
table.grid thead th.grp-fmt{background:linear-gradient(160deg,var(--hijau-terang),var(--hijau))}
table.grid thead th.grp-smt{background:linear-gradient(160deg,#1d6f8b,#14556b)}
table.grid thead th.grp-asas{background:linear-gradient(160deg,var(--maroon-terang),var(--maroon))}
table.grid thead th.grp-na{background:linear-gradient(160deg,var(--emas),#a9741b);color:#3f2f05;
border-bottom-color:#8a6a12}
table.grid thead tr.sub th{font-size:.63rem;padding:7px 4px}
/* pemisah antar kelompok kolom agar mata mudah menyusur judul ↔ isian */
table.grid th.awal-grup,table.grid td.awal-grup{border-left:2px solid rgba(11,74,51,.28)}
table.grid thead th.awal-grup{border-left:2px solid rgba(255,255,255,.55)}
/* kotak input: memenuhi selnya sendiri, jadi selalu tepat di bawah judulnya */
table.grid td.sel-nilai{padding:4px 5px}
input.nil{
width:100%;min-width:0;box-sizing:border-box;padding:7px 4px;text-align:center;
border-radius:8px;border:1px solid rgba(11,74,51,.25);background:#fff;
font:inherit;font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--ink);
}
input.nil:focus{border-color:var(--emas);box-shadow:0 0 0 2px rgba(201,162,39,.28);outline:none}
input.nil::-webkit-outer-spin-button,input.nil::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.nil[type=number]{-moz-appearance:textfield}
input.nil[disabled]{background:rgba(231,242,236,.5);color:var(--muted);border-style:dashed}
/* kolom hitungan otomatis */
td.na{
font-weight:800;background:rgba(201,162,39,.12);font-variant-numeric:tabular-nums;
color:var(--hijau-tua);padding:9px 6px;
}
td.na.belum{color:var(--muted);font-weight:600}
td.predikat{padding:6px 4px}
tfoot td{background:var(--emas-muda);font-weight:700;padding:9px 6px;font-variant-numeric:tabular-nums}
tfoot td.kiri{text-align:left;padding-left:12px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.75rem;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px}
/* ===== Daftar hadir (H/S/I/A) =====
Permintaan pemilik: keempat tombol tampil SAMA pada keadaan awal — kotak putih-krem dengan huruf
hitam — supaya tidak menyiratkan arti, lalu berubah HIJAU ketika dipilih.
Karena itu aturan warna PER KODE (sel-H/sel-S/sel-I/sel-A) DIHAPUS dari CSS: kelas dasarnya tetap
ada di markup (absensi_form.php) karena assets/app.js `tandai()` memakainya sebagai penanda —
jangan dihapus dari markup, cukup warnanya yang tidak diatur lagi di sini.
Tombol H sudah terpilih otomatis saat formulir dibuka (default 'H' dari absensi_form.php). */
.st{display:inline-flex;gap:5px;position:relative}
.st label{
width:34px;height:34px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);
background:#fcf9ef;font-weight:800;font-size:.8rem;cursor:pointer;transition:.14s;color:#111827;
}
.st input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.st label:hover{transform:translateY(-1px);border-color:var(--emas)}
/* Terpilih: kotak DAN huruf berubah menjadi hijau (huruf dibuat putih agar tetap terbaca di atas
latar hijau — bila pemilik ingin huruf tetap hijau, ubah warna huruf pada aturan ini). */
.st label.sel{
background:linear-gradient(150deg,#178a5f,#0b5c3f);color:#fff;border-color:transparent;
box-shadow:0 8px 16px -10px rgba(0,0,0,.7);
}
/* ===== Ringkasan kehadiran pada Jurnal Harian ===== */
.kehadiran-kode{display:inline-flex;gap:5px;flex-wrap:wrap;justify-content:center}
.kehadiran-kode .kh{
display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;
background:rgba(11,74,51,.07);border:1px solid rgba(11,74,51,.18);
font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);
}
.kehadiran-kode .kh i{font-style:normal;font-size:.69rem;opacity:.85}
.kehadiran-kode .kh.ada{background:rgba(109,27,37,.12);border-color:rgba(109,27,37,.3);color:#7f1d28}
/* ===== Catatan & rumus ===== */
.list-ok{margin:0;padding-left:20px;font-size:.85rem}
.list-ok li{margin-bottom:6px}
.note-rumus{
background:var(--emas-muda);border:1px dashed rgba(201,162,39,.7);border-radius:10px;
padding:12px 15px;font-size:.82rem;color:#4d3f0c;line-height:1.55;
}
.note-rumus b{color:#3f2f05}
.ket{font-size:.72rem;color:var(--muted);margin-top:10px;line-height:1.5}
.ket-kode{font-size:.72rem;color:var(--muted);margin-top:10px;line-height:1.5}
/* grafik */
.chart-box{position:relative;height:270px}
.chart-box.tall{height:330px}
.chart-box.short{height:210px}
/* ===== Portal halaman masuk (login.php) ===== */
.portal-wrap{min-height:100vh;padding:30px 20px 44px}
.portal-inner{max-width:1240px;margin:0 auto}
.portal-head{
display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
padding-bottom:16px;margin-bottom:22px;border-bottom:3px double var(--emas);
}
.portal-brand{display:flex;align-items:center;gap:15px;min-width:0}
.portal-logo{
width:62px;height:62px;border-radius:17px;display:grid;place-items:center;color:#fff;flex:0 0 auto;
background:linear-gradient(160deg,var(--hijau-tua),var(--hijau));
border:2px solid var(--emas);box-shadow:0 12px 26px -14px rgba(9,61,44,.85);
}
.portal-brand h1{margin:0;font-size:1.5rem;font-family:var(--serif);color:var(--hijau-tua);letter-spacing:-.01em}
.portal-tagline{display:inline-block;font-family:Inter,system-ui,sans-serif;font-size:.78rem;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:var(--maroon);vertical-align:middle;margin-left:8px}
.portal-head-kanan{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Kartu masuk berdiri sendiri & terpusat.
(Kartu "Tentang Aplikasi", "Menu Aplikasi", dan "Cara Mulai & Keamanan" sudah DIHAPUS atas
permintaan pemilik — jangan menambahkan kembali; aturan CSS-nya juga sudah dibuang.) */
.portal-solo{max-width:540px;margin:0 auto}
.portal-login h2{display:flex;align-items:center;gap:8px;font-size:1.05rem}
.portal-bantuan{
background:var(--emas-muda);border:1px dashed rgba(201,162,39,.7);border-radius:10px;padding:11px 13px;
font-size:.78rem;line-height:1.5;color:#4d3f0c;
}
.portal-bantuan b{display:block;color:#3f2f05;margin-bottom:3px}
/* Footer portal: keterangan versi + baris pengembang (paling bawah halaman). */
.portal-pengembang{line-height:1.5;font-weight:600;color:var(--hijau-tua)}
.portal-foot{
display:flex;justify-content:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.75rem;
margin-top:28px;padding-top:14px;border-top:3px double var(--emas);text-align:center;
}
/* responsif: halaman masuk di layar sempit */
@media (max-width:640px){
.portal-wrap{padding:20px 14px 34px}
.portal-head-kanan{width:100%}
.portal-brand h1{font-size:1.28rem}
.portal-tagline{display:block;margin:4px 0 0}
.portal-foot{flex-direction:column}
}
/* ===== Halaman pendaftaran publik (daftar.php) ===== */
.daftar-wrap{min-height:100vh;padding:32px 18px 46px}
.daftar-inner{max-width:940px;margin:0 auto}
.daftar-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.daftar-logo{
width:58px;height:58px;border-radius:16px;display:grid;place-items:center;color:#fff;flex:0 0 auto;
background:linear-gradient(160deg,var(--hijau-tua),var(--hijau));
border:2px solid var(--emas);box-shadow:0 12px 26px -14px rgba(9,61,44,.85);
}
.daftar-head h1{font-size:1.38rem;margin:0}
.daftar-head p{margin:5px 0 0;color:var(--muted);font-size:.85rem}
.daftar-head-kanan{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.daftar-foot{margin-top:22px;text-align:center;font-size:.76rem;color:var(--muted)}
/* Langkah/alur pendaftaran — bernomor emas, dan varian ikon untuk daftar fitur */
.langkah{
display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);
border-left:3px solid var(--emas);border-radius:11px;padding:11px 13px;
}
.langkah b{display:block;font-size:.85rem;color:var(--hijau-tua)}
.langkah span{font-size:.78rem;color:var(--muted)}
.langkah i{
width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-style:normal;
font-weight:800;font-size:.78rem;color:#3f2f05;flex:0 0 auto;
background:linear-gradient(150deg,var(--emas-terang),var(--emas));border:1px solid rgba(120,92,10,.35);
}
/* Catatan: aturan .langkah-ico DIHAPUS bersama kartu "Apa yang Anda dapatkan" pada halaman
pendaftaran (permintaan pemilik) — kartu itu satu-satunya pemakainya. */
.kredensial{border:1px dashed rgba(201,162,39,.7);background:var(--emas-muda);border-radius:11px;padding:12px 14px}
/* Pilihan Asal Sekolah/Madrasah: "pilih sekolah terdaftar" ATAU "input sekolah baru" */
.pilih-dua{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.pilih-opsi{
display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:11px;cursor:pointer;
border:1px solid var(--line);background:#fff;transition:.16s;
}
.pilih-opsi:hover{border-color:var(--emas);background:var(--emas-muda)}
.pilih-opsi input[type=radio]{width:16px;height:16px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--hijau)}
.pilih-opsi:has(input:checked){border-color:var(--hijau);background:var(--hijau-muda);
box-shadow:0 0 0 3px rgba(201,162,39,.16)}
.pilih-opsi:has(input:disabled){opacity:.55;cursor:not-allowed}
.pilih-isi{display:flex;flex-direction:column;gap:2px;min-width:0}
.pilih-isi b{font-size:.83rem;color:var(--hijau-tua)}
.pilih-isi .mut{font-size:.73rem;line-height:1.4}
/* Isian yang tidak dipilih disembunyikan HANYA bila skrip aktif (html.js) — tanpa JavaScript
kedua isian tetap terlihat sehingga pendaftaran tetap dapat diselesaikan. */
html.js .blok-asal.sembunyi{display:none}
@media (max-width:640px){
.pilih-dua{grid-template-columns:1fr}
.daftar-head-kanan{margin-left:0;width:100%}
.daftar-wrap{padding:22px 14px 36px}
}
/* ===== Foto bukti kegiatan pada Notulen rapat ===== */
.not-foto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.not-foto-item{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:var(--radius);
padding:12px;background:#fff}
.not-foto-gambar{border:2px solid var(--emas);border-radius:12px;overflow:hidden;background:#f6f7f4}
.not-foto-gambar img{width:100%;height:170px;object-fit:cover;display:block}
.not-foto-ket{display:flex;gap:8px;align-items:center}
.not-foto-ket input{flex:1 1 auto;min-width:0;padding:7px 10px;font-size:.82rem}
/* ===== Cetak / dokumen ===== */
.print-sheet{background:#fff;padding:30px 34px;border-radius:var(--radius);box-shadow:var(--shadow);
border:1px solid var(--line);border-top:4px solid var(--emas)}
.sheet-head{text-align:center;border-bottom:3px double var(--hijau-tua);padding-bottom:12px;margin-bottom:16px}
.sheet-head.kop-logo{display:flex;align-items:center;gap:18px;text-align:left}
.sheet-head.kop-logo .kop-gambar{flex:0 0 auto}
.sheet-head.kop-logo .kop-gambar img{width:26mm;height:26mm;object-fit:contain;display:block}
.sheet-head.kop-logo .kop-teks{flex:1;text-align:center}
.sheet-head h2{font-size:1.16rem;text-transform:uppercase;letter-spacing:.02em;color:var(--hijau-tua)}
.sheet-head p{margin:4px 0 0;font-size:.83rem;color:var(--muted)}
/* Nama sekolah/madrasah pada kop dibuat TEBAL (permintaan pemilik) — dipakai semua lembar cetak
lewat kop_cetak() di inc/kop.php. */
.sheet-head .kop-nama{font-weight:800;font-size:.95rem;color:var(--hijau-tua);letter-spacing:.01em}
.sheet-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;font-size:.86rem;margin-bottom:18px}
.sheet-meta b{display:inline-block;min-width:132px;color:var(--hijau-tua);font-weight:700}
.sheet-foto{float:right;margin:0 0 14px 18px}
table.sheet{width:100%;border-collapse:collapse;font-size:.82rem}
table.sheet th,table.sheet td{border:1px solid #7d8f86;padding:7px 9px;vertical-align:top;text-align:left}
table.sheet th{background:var(--hijau-muda);font-weight:700;font-size:.78rem;color:var(--hijau-tua)}
table.sheet thead tr:first-child th{border-bottom:2px solid var(--hijau-tua)}
table.sheet tfoot th{background:var(--emas-muda)}
table.sheet td.ctr,table.sheet th.ctr{text-align:center}
table.sheet.padat th,table.sheet.padat td{padding:5px 6px;font-size:.76rem}
/* Judul KELOMPOK kolom pada lembar cetak (kelas .grp-fmt/.grp-smt/.grp-asas/.grp-na dipakai
juga oleh tabel input nilai — di sini versi lembar cetak dibuat lebih terang agar aman dicetak).
Hijau = Formatif (penilaian proses), biru = Sumatif Lingkup Materi, maroon = ASAS, emas = Nilai Akhir.
"awal-grup" memberi garis pemisah antarkelompok kolom. */
table.sheet th.grp-fmt{background:#e2f1ea}
table.sheet th.grp-smt{background:#e0edf3}
table.sheet th.grp-asas{background:#f3e3e5}
table.sheet th.grp-na{background:var(--emas-muda)}
table.sheet th.awal-grup,table.sheet td.awal-grup{border-left:2px solid var(--hijau-tua)}
table.sheet thead tr.sub th{font-size:.72rem;color:var(--muted);font-weight:700}
.sheet-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sheet-foot{display:flex;justify-content:space-between;gap:30px;margin-top:32px;font-size:.85rem}
.sheet-sign{text-align:center;flex:1}
.sheet-sign .space{height:62px}
.sheet-sign u{font-weight:700}
.sheet-foot.kanan{justify-content:flex-end}
.sheet-sign-kanan{flex:0 0 auto;min-width:250px;text-align:center}
.sheet-sign-kiri{text-align:center}
/* Dua tanda tangan berdampingan (mis. kepala sekolah/madrasah & guru): kedua blok
dibuat SAMA LEBAR sehingga berlaku simetris — posisinya ditentukan oleh URUTAN di HTML,
bukan oleh kelas. Urutan yang dipakai aplikasi ini: kepala di KIRI, guru di KANAN. */
.sheet-foot.dua-ttd .sheet-sign{flex:1 1 0;min-width:0;text-align:center}
.nilai-box{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.nilai-chip{min-width:132px;text-align:center;border:1px solid var(--line);border-top:3px solid var(--emas);
border-radius:11px;padding:11px 16px;background:#fff}
.nilai-chip b{display:block;font-size:1.5rem;font-weight:800;color:var(--hijau-tua)}
.nilai-chip span{font-size:.73rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.kop-kecil .sheet-head h2{font-size:1.05rem}
/* kosong */
.empty{text-align:center;padding:34px 20px;color:var(--muted)}
.empty svg{opacity:.5;margin-bottom:10px;color:var(--hijau)}
.empty h3{color:var(--hijau-tua);margin-bottom:6px}
.empty p{margin:0 0 16px;font-size:.86rem}
/* utilitas */
.mut{color:var(--muted)}
.sm{font-size:.8rem}
.xs{font-size:.73rem}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}
.center{text-align:center}
.right{text-align:right}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--emas),transparent);margin:16px 0}
.chip-list{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:8px;background:#fff;
border:1px solid var(--line);font-size:.77rem;font-weight:600;color:var(--hijau-tua)}
.chip.on{background:linear-gradient(150deg,var(--hijau),var(--hijau-tua));color:#fff;border-color:transparent}
.chip-mati{opacity:.6}
/* nav toggle mobile */
.nav-toggle{display:none;position:fixed;top:14px;left:14px;z-index:60;width:42px;height:42px;border-radius:11px;
border:1px solid var(--emas);background:var(--hijau-tua);cursor:pointer;align-items:center;justify-content:center;color:var(--emas-muda)}
.scrim{display:none;position:fixed;inset:0;background:rgba(9,42,30,.5);z-index:35;backdrop-filter:blur(2px)}
@media (max-width:1080px){
.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.g5{grid-template-columns:repeat(3,minmax(0,1fr))}
.g21,.g12,.g3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
.nav-toggle{display:flex}
.sidebar{transform:translateX(-100%);transition:transform .22s ease}
.sidebar.open{transform:none}
.scrim.on{display:block}
.main{margin-left:0;padding:70px 16px 32px}
.g2{grid-template-columns:minmax(0,1fr)}
.topbar{align-items:flex-start}
.print-sheet{padding:18px 14px}
.sheet-meta{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat-num{font-size:1.45rem}
.foto-baris{gap:16px}
.foto-sisi{flex-direction:row;align-items:center;width:100%}
}
@media print{
body{background:#fff}
.bg-deco,.sidebar,.nav-toggle,.topbar,.foot,.no-print,.scrim{display:none !important}
.main{margin:0;padding:0}
.content{gap:0;margin-top:0}
.print-sheet{box-shadow:none;border:none;border-top:none;padding:0;border-radius:0}
.card{background:#fff;box-shadow:none;border:none}
.card::before{display:none}
.sheet-foto{float:right}
a{color:inherit;text-decoration:none}
table.sheet th{background:#eaf2ec !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
table.sheet tfoot th{background:#fbf4dd !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
@page{size:A4;margin:14mm}
}
/* ==========================================================================
SMART TEACHER — ruang aplikasi pembelajaran guru
Blok tambahan di atas tema hijau tua + emas (keluarga e-GURU / e-PERPUS).
========================================================================== */
/* ---------- Kartu sambutan halaman menu ---------- */
.jump-card{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.jump-ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;flex:0 0 auto;
background:linear-gradient(150deg,var(--hijau-terang),var(--hijau-tua));color:var(--emas-muda);
box-shadow:0 12px 24px -14px rgba(11,74,51,.75);border:2px solid var(--emas)}
.jump-teks{min-width:240px;flex:1 1 320px}
.jump-teks h2{font-size:1.25rem}
.jump-teks p{margin:6px 0 0;color:var(--muted);font-size:.86rem;line-height:1.6;max-width:70ch}
.jump-stat{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
/* ---------- Grid menu aplikasi (dashboard) ---------- */
/* ==========================================================================
KARTU MENU APLIKASI pada dashboard pengguna (guru) — TIAP MENU BEDA WARNA
(permintaan pemilik: "buat kartu menu aplikasi berbeda warna dengan tampilan menarik").
Warna dipilih dari POSISI kartu lewat menu_warna() (inc/helpers.php) → kelas .warna-1..10,
jadi dua kartu bersebelahan tidak pernah sewarna walau menu ditambah/dihapus.
Gradasi tiap warna sudah diperiksa kontras ≥ 4.5:1 terhadap teks putih
(uji: tests_smartteacher_warna.sh) — jangan mengubah heksanya tanpa memeriksa ulang.
========================================================================== */
.menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* Palet: dua heksa + bayangan sorot (glow) per warna. */
.menu-tile{--mt-1:#0b4a33;--mt-2:#10654a;--mt-glow:rgba(11,74,51,.55)}
.menu-tile.warna-1{--mt-1:#0b4a33;--mt-2:#10654a;--mt-glow:rgba(11,74,51,.55)}
.menu-tile.warna-2{--mt-1:#0f3f7a;--mt-2:#175fa8;--mt-glow:rgba(15,63,122,.55)}
.menu-tile.warna-3{--mt-1:#3b1d6e;--mt-2:#5b32b5;--mt-glow:rgba(59,29,110,.55)}
.menu-tile.warna-4{--mt-1:#5c1621;--mt-2:#8a2434;--mt-glow:rgba(92,22,33,.55)}
.menu-tile.warna-5{--mt-1:#5c4206;--mt-2:#8a6a0e;--mt-glow:rgba(92,66,6,.55)}
.menu-tile.warna-6{--mt-1:#0b4a4a;--mt-2:#0f6f6b;--mt-glow:rgba(11,74,74,.55)}
.menu-tile.warna-7{--mt-1:#6b2a0c;--mt-2:#98400f;--mt-glow:rgba(107,42,12,.55)}
.menu-tile.warna-8{--mt-1:#1e2a78;--mt-2:#3a44c4;--mt-glow:rgba(30,42,120,.55)}
.menu-tile.warna-9{--mt-1:#661a45;--mt-2:#9b1f7a;--mt-glow:rgba(102,26,69,.55)}
.menu-tile.warna-10{--mt-1:#0c3956;--mt-2:#0e5f86;--mt-glow:rgba(12,57,86,.55)}
.menu-tile{display:flex;flex-direction:column;gap:12px;height:100%;position:relative;overflow:hidden;
border:0;border-radius:var(--radius);padding:20px;color:#fff;text-decoration:none;
background:linear-gradient(145deg,var(--mt-1) 0%,var(--mt-2) 100%);
box-shadow:0 14px 28px -20px var(--mt-glow);
transition:transform .18s ease,box-shadow .18s ease}
/* Kilau lembut di sudut kanan atas + garis emas tipis agar tetap senada tema madrasah. */
.menu-tile::before{content:"";position:absolute;top:-40%;right:-30%;width:78%;height:150%;
background:radial-gradient(closest-side,rgba(255,255,255,.26),rgba(255,255,255,0));
transform:rotate(18deg);pointer-events:none}
.menu-tile::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,rgba(227,195,104,.95),rgba(255,255,255,.25));pointer-events:none}
.menu-tile:hover,.menu-tile:focus-visible{
text-decoration:none;transform:translateY(-4px);box-shadow:0 26px 42px -22px var(--mt-glow)}
.menu-tile:focus-visible{outline:3px solid var(--emas-terang);outline-offset:3px}
/* Ikon besar sebagai hiasan latar (tidak mengganggu teks, tidak dibaca pembaca layar). */
.menu-tile-hias{position:absolute;right:-26px;bottom:-30px;color:#fff;opacity:.13;pointer-events:none;
line-height:0;transform:rotate(-8deg)}
.menu-tile-ico{position:relative;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.menu-tile b{position:relative;display:block;font-family:var(--serif);font-size:1.08rem;color:#fff;
line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,.28)}
.menu-tile span.ket{position:relative;display:block;color:rgba(255,255,255,.9);font-size:.81rem;
line-height:1.55;flex:1 1 auto}
.menu-tile-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
border-top:1px solid rgba(255,255,255,.28);padding-top:12px;margin-top:auto}
/* Jumlah aplikasi: kaca transparan agar terbaca di atas warna apa pun. */
.menu-tile-jml{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.32);
color:#fff;font-size:.75rem;font-weight:700;white-space:nowrap}
/* Tombol ajakan: putih solid dengan huruf berwarna menu → paling menarik perhatian. */
.menu-tile-buka{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:10px;
background:#fff;color:var(--mt-1);font-size:.78rem;font-weight:700;white-space:nowrap;
box-shadow:0 6px 14px -8px rgba(0,0,0,.5);transition:transform .15s ease,background .15s ease}
.menu-tile:hover .menu-tile-buka{transform:translateX(2px);background:var(--emas-muda)}
/* Chip menu pada dashboard Super Admin memakai warna yang sama dengan kartu di atas. */
.chip.chip-menu{border:0;color:#fff;
background:linear-gradient(140deg,var(--mt-1,#0b4a33),var(--mt-2,#10654a));
box-shadow:0 8px 18px -14px var(--mt-glow,rgba(11,74,51,.55))}
.chip.chip-menu:hover{text-decoration:none;transform:translateY(-1px)}
.chip.chip-menu .chip-num{background:rgba(255,255,255,.22);color:#fff}
.chip-menu.warna-1{--mt-1:#0b4a33;--mt-2:#10654a;--mt-glow:rgba(11,74,51,.55)}
.chip-menu.warna-2{--mt-1:#0f3f7a;--mt-2:#175fa8;--mt-glow:rgba(15,63,122,.55)}
.chip-menu.warna-3{--mt-1:#3b1d6e;--mt-2:#5b32b5;--mt-glow:rgba(59,29,110,.55)}
.chip-menu.warna-4{--mt-1:#5c1621;--mt-2:#8a2434;--mt-glow:rgba(92,22,33,.55)}
.chip-menu.warna-5{--mt-1:#5c4206;--mt-2:#8a6a0e;--mt-glow:rgba(92,66,6,.55)}
.chip-menu.warna-6{--mt-1:#0b4a4a;--mt-2:#0f6f6b;--mt-glow:rgba(11,74,74,.55)}
.chip-menu.warna-7{--mt-1:#6b2a0c;--mt-2:#98400f;--mt-glow:rgba(107,42,12,.55)}
.chip-menu.warna-8{--mt-1:#1e2a78;--mt-2:#3a44c4;--mt-glow:rgba(30,42,120,.55)}
.chip-menu.warna-9{--mt-1:#661a45;--mt-2:#9b1f7a;--mt-glow:rgba(102,26,69,.55)}
.chip-menu.warna-10{--mt-1:#0c3956;--mt-2:#0e5f86;--mt-glow:rgba(12,57,86,.55)}
/* ==========================================================================
LABEL "NEW" (menu baru) — permintaan pemilik: pita kecil warna merah di atas menu aplikasi.
Diatur dari form "Tambah Menu dan Aplikasi" (centang "Tandai sebagai menu baru") dan
hilang sendiri setelah MENU_BARU_HARI (30) hari.
Dipakai di SEMUA tempat menu tampil: kartu dashboard, sidebar, chip menu, dan tabel pengelolaan.
========================================================================== */
/* Kedipan halus label NEW (permintaan pemilik: "berwarna merah berkedip-kedip").
Sengaja memakai opacity (bukan warna) supaya kontras huruf tetap terjaga, dan dimatikan bagi
pengguna yang mengaktifkan "kurangi gerakan" di perangkatnya (prefers-reduced-motion). */
@keyframes newKedip{
0%,100%{opacity:1}
50%{opacity:.32}
}
/* Pita sudut kiri-atas pada kartu menu dashboard pengguna — kecil, di atas nama menu. */
.menu-tile-new{
position:absolute;top:0;left:0;z-index:2;
padding:1px 7px;border-radius:0 0 8px 0;
/* Warna merah sengaja TIDAK memakai #ef4444: huruf putih di atasnya hanya kontras 3.76:1
(di bawah standar 4.5:1). #dc2626 = 4.83:1 dan #991b1b = 8.31:1 — diperiksa oleh uji. */
background:linear-gradient(145deg,#dc2626,#991b1b);color:#fff;
font-size:.54rem;font-weight:800;letter-spacing:.07em;line-height:1.45;
box-shadow:0 6px 14px -8px rgba(0,0,0,.5);
border-right:1px solid rgba(255,255,255,.4);border-bottom:1px solid rgba(255,255,255,.4);
animation:newKedip 1.15s ease-in-out infinite;
}
/* Kotak setelan "Tandai sebagai menu baru" pada formulir Tambah Menu dan Aplikasi. */
.card-setelan{
padding:14px 16px;border:1px solid rgba(185,28,28,.28);border-left:4px solid #dc2626;
border-radius:var(--radius-sm);background:#fef5f5;
}
.card-setelan .hint{margin-top:6px}
/* Kartu menu yang berlabel NEW: isinya digeser sedikit ke bawah supaya pita tipis di pojok
kiri-atas TIDAK menimpa plat ikon (kelas `ada-baru` ditambahkan bersama kelas warna pada markup). */
.menu-tile.ada-baru{padding-top:26px}
/* Tanda NEW pada sidebar, chip menu, dan tabel: kecil, merah, diletakkan DI ATAS NAMA MENU
(bukan sejajar di sampingnya) dan berkedip halus. */
.new-tag{
display:inline-block;padding:1px 7px;border-radius:999px;width:max-content;
background:linear-gradient(145deg,#dc2626,#991b1b);color:#fff;
font-size:.54rem;font-weight:800;letter-spacing:.07em;line-height:1.45;white-space:nowrap;
box-shadow:0 4px 10px -6px rgba(185,28,28,.85);
animation:newKedip 1.15s ease-in-out infinite;
}
/* Wadah nama menu pada sidebar & chip: menjadikan tanda NEW berada SEBARIS DI ATAS nama menu. */
.nav-nama,.chip-nama{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.nav-nama>.new-tag,.chip-nama>.new-tag{margin-bottom:1px}
/* Tanda NEW pada tabel pengelolaan: baris kecil tersendiri TEPAT DI ATAS nama menu.
(display:block wajib di sini — tanpa itu tanda tetap sebaris di samping nama menu.) */
.new-tag-blok{display:block;width:max-content;margin:0 0 3px}
@media (prefers-reduced-motion: reduce){
.menu-tile-new,.new-tag{animation:none}
}
/* Warna kartu tidak perlu ikut tercetak (dashboard tidak dirancang untuk cetak):
dibuat putih polos supaya tinta tidak boros dan teks tetap terbaca. */
@media print{
.menu-tile{background:#fff !important;color:var(--ink);box-shadow:none;border:1px solid var(--line)}
.menu-tile b,.menu-tile span.ket,.menu-tile-jml,.menu-tile-buka{color:var(--ink) !important}
.menu-tile-hias{display:none}
.menu-tile-ico{background:var(--hijau-muda);border-color:var(--line);color:var(--hijau-tua)}
.menu-tile-buka{border:1px solid var(--line)}
.menu-tile-new,.new-tag{display:none !important}
.card-setelan{border:none;background:#fff;padding:0}
.chip.chip-menu{background:#fff !important;color:var(--hijau-tua) !important;border:1px solid var(--line)}
}
/* ---------- Kartu aplikasi (daftar aplikasi per menu) ---------- */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.app-card{display:flex;flex-direction:column;gap:12px;height:100%;
border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
padding:20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.app-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--hijau-tua),var(--emas))}
.app-card.mati{opacity:.72}
.app-head{display:flex;gap:13px;align-items:flex-start}
.app-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;font-weight:800;
background:linear-gradient(150deg,var(--emas-terang),var(--emas));color:#3f2f05;border:1px solid rgba(120,92,10,.3);
font-family:var(--serif);font-size:1rem}
.app-head b{display:block;color:var(--hijau-tua);font-size:1rem;line-height:1.35}
.app-head .pill{margin-top:5px}
.app-ket{color:var(--muted);font-size:.85rem;line-height:1.6;margin:0;flex:1 1 auto;white-space:pre-line}
/* Catatan: gaya .app-src (penampil alamat aplikasi) DIHAPUS karena tautan aplikasi
tidak lagi ditampilkan pada halaman menu (permintaan pemilik). */
.app-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
border-top:1px dashed var(--line);padding-top:13px;margin-top:auto}
.app-klik{font-size:.75rem;color:var(--muted)}
.app-none{color:var(--muted);font-size:.84rem;font-style:italic}
/* ---------- Bilah langkah pada halaman galat tautan ---------- */
.pesan-polos{max-width:640px;margin:60px auto;text-align:center}
@media (max-width:1080px){
.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.menu-grid,.app-grid{grid-template-columns:minmax(0,1fr)}
}
/* Bilah chip menu: angka jumlah aplikasi pada tiap chip */
.chip-num{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
background:rgba(11,74,51,.1);color:var(--hijau-tua);font-size:.72rem;font-weight:800}
.chip.on .chip-num{background:rgba(255,255,255,.25);color:#fff}
/* Kepala halaman masuk: logo + nama aplikasi di TENGAH (tombol di kanan atas sudah dihapus). */
.portal-head-tengah{justify-content:center;text-align:center;gap:16px}
.portal-head-tengah h1{margin:0}
/* ---------- Daftar Aplikasi: blok menu baru & Zona Berbahaya (hapus menu) ---------- */
#blokMenuAda, #blokMenuBaru{padding-left:14px;border-left:3px solid var(--emas);border-radius:4px}
#blokMenuBaru{background:var(--emas-muda);padding:14px}
#blokMenuBaru .divider{margin:10px 0 0}
.card.danger-zone{border-color:rgba(109,27,37,.45);border-top:3px solid var(--maroon)}
.card.danger-zone .card-head h2{color:var(--maroon);display:flex;align-items:center;gap:8px}
.tbl .tbl-sub.kanan{display:block;text-align:right;margin-top:4px}
/* ---------- Grafik dashboard Super Admin ---------- */
.chart-box canvas{max-width:100%}
/* Keterangan chip menu di bawah grafik aplikasi */
.chip-list .xs.mut{align-self:center}
@media (max-width:520px){
.chart-box{height:230px}
.chart-box.tall{height:290px}
}
/* ==========================================================================
DONASI / SEDEKAH — kartu ajakan + POPUP data rekening (dashboard guru)
========================================================================== */
.donasi-card{
display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
border:1px solid var(--line);border-top:3px solid var(--emas);
background:linear-gradient(150deg,#fffdf6,var(--emas-muda));
}
.donasi-ico{
width:56px;height:56px;border-radius:16px;display:grid;place-items:center;flex:0 0 auto;
background:linear-gradient(150deg,var(--emas-terang),var(--emas));color:#3f2f05;
border:2px solid rgba(120,92,10,.35);box-shadow:0 12px 24px -14px rgba(120,92,10,.7);
}
.donasi-teks{min-width:240px;flex:1 1 320px}
.donasi-teks h2{font-size:1.12rem;margin-bottom:6px}
.donasi-teks p{margin:0 0 12px;color:var(--muted);font-size:.86rem;line-height:1.6;max-width:72ch}
.donasi-aksi{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* Popup (memakai elemen