/* ============================================================
   Tampilan modern School OS: panel menu kiri melayang (rounded), topbar kartu, kartu & tabel lebih lembut.
   Dimuat setelah school-os.css, jadi cukup menimpa. Warna mengikuti tema (--hijau-tua, --hijau, --tema-gelap).
   ============================================================ */
:root { --rail-lebar:262px; --rail-celah:14px; --radius-kartu:16px; }
body { background:radial-gradient(1200px 500px at 85% -10%, rgba(var(--tema-tua-rgb),.07), transparent 60%), #eef2f5; }

/* ----- Panel menu kiri ----- */
.rail {
	width:var(--rail-lebar); top:var(--rail-celah); left:var(--rail-celah); bottom:var(--rail-celah); height:auto;
	border-radius:24px; padding:14px 10px 12px;
	background:linear-gradient(165deg, var(--hijau) 0%, var(--hijau-tua) 55%, var(--tema-gelap) 100%);
	box-shadow:0 18px 40px rgba(var(--tema-tua-rgb),.32), 0 2px 6px rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.12);
	scrollbar-width:none;
}
.rail::-webkit-scrollbar { display:none; }
.rail-profil-wrap { padding:0 4px 10px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.16); }
.rail-brand { display:flex; align-items:center; gap:11px; padding:4px 36px 12px 2px; color:#fff; }
.rail-brand .logo-tile { width:44px; height:44px; border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; box-shadow:0 4px 12px rgba(0,0,0,.2); overflow:hidden; }
.rail-brand .logo-tile i { color:var(--hijau-tua); font-size:21px; } .rail-brand .logo-tile img { width:30px; height:30px; object-fit:contain; }
.rail-brand .brand-teks { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.rail-brand .brand-teks b { font-size:14.5px; letter-spacing:.3px; text-transform:uppercase; }
.rail-brand .brand-teks small { font-size:11px; color:rgba(255,255,255,.78); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail .rail-gulung-btn { top:12px !important; right:6px !important; width:26px !important; height:26px !important; background:rgba(255,255,255,.18) !important; color:#fff !important; border:0 !important; box-shadow:none !important; }
.rail .rail-gulung-btn:hover { background:rgba(255,255,255,.3) !important; }

.rail-profil { display:grid; grid-template-columns:38px 1fr; column-gap:10px; align-items:center; padding:9px 10px; margin:0; border:0; border-radius:14px; background:rgba(255,255,255,.1); text-align:left; }
.rail-avatar { grid-row:1/3; width:38px; height:38px; font-size:14px; border-width:2px; background:rgba(255,255,255,.18); box-shadow:none; }
.rail-nama { text-align:left; font-size:12.5px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-peran { text-align:left; font-size:10px; }
.rail-profil > a { grid-column:1/-1; }

/* ----- Item menu ----- */
.rail a.item, .rail button.item-grup {
	margin:3px 2px; padding:10px 12px; border-radius:14px; border-left:0; color:rgba(255,255,255,.88); font-weight:600; font-size:13px; gap:12px; width:auto;
	transition:background .15s, color .15s, transform .15s, box-shadow .15s;
}
.rail button.item-grup { width:calc(100% - 4px); }
.rail a.item i:not(.chevron), .rail button.item-grup > i:not(.chevron) { width:20px; font-size:15px; opacity:.95; }
.rail a.item:hover, .rail button.item-grup:hover { background:rgba(255,255,255,.14); color:#fff; transform:translateX(2px); }
.rail a.item.active { background:#fff; color:var(--hijau-tua); box-shadow:0 6px 16px rgba(0,0,0,.18); border-left:0; }
.rail a.item.active i { color:var(--hijau); opacity:1; }
.rail a.item.active:hover { transform:none; }
.rail button.item-grup.open { background:rgba(255,255,255,.16); color:#fff; }
.rail button.item-grup .chevron { font-size:11px; opacity:.8; }

/* ----- Submenu ----- */
.rail-group-body { margin:2px 2px 6px 18px; padding-left:10px; border-left:2px solid rgba(255,255,255,.18); }
.rail-group-body a { padding:8px 12px; margin:2px 0; border-radius:12px; border-left:0; font-size:12.5px; gap:10px; color:rgba(255,255,255,.82); transition:background .15s, color .15s; }
.rail-group-body a i { width:16px; font-size:12px; }
.rail-group-body a:hover { background:rgba(255,255,255,.14); color:#fff; }
.rail-group-body a.active { background:#fff; color:var(--hijau-tua); font-weight:700; border-left:0; box-shadow:0 4px 12px rgba(0,0,0,.16); }
.rail-group-body a.active i { color:var(--hijau); }

.rail .spacer { margin:10px 6px; background:rgba(255,255,255,.16); }
.rail .rail-badge { background:#ff5d5d; }

/* ----- Area utama ----- */
.main { margin-left:calc(var(--rail-lebar) + var(--rail-celah) * 2); }
@media (max-width:900px) { .main { margin-left:calc(var(--rail-lebar) + var(--rail-celah) * 2); } }
.topbar { margin:var(--rail-celah) var(--rail-celah) 0 0; border-radius:18px; padding:11px 20px; box-shadow:0 2px 12px rgba(31,45,61,.07); top:var(--rail-celah); border:1px solid #e8edf2; }
.topbar .judul-halaman { font-size:16px; font-weight:800; }
.content { padding:22px 22px 30px 4px; }
.content h1 { font-weight:800; letter-spacing:-.2px; }

/* ----- Kartu, tabel, tombol ----- */
.card { border-radius:var(--radius-kartu); border:1px solid #e8edf2; box-shadow:0 2px 14px rgba(31,45,61,.05); background:#fff; }
.card h6 { font-size:14px; font-weight:800; color:#1f2d3d; }
.stat-card, .kartu-stat { border-radius:var(--radius-kartu); }
table th { font-weight:700; }
.btn, .btn-primary, .btn-secondary { border-radius:11px; }
.btn-primary { background:linear-gradient(135deg, var(--hijau), var(--hijau-tua)); border:0; box-shadow:0 4px 12px rgba(var(--tema-tua-rgb),.25); }
.btn-primary:hover { filter:brightness(1.06); }
.btn-toolbar { border-radius:11px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea { border-radius:10px; }
.lonceng-dropdown, .gs-panel { border-radius:16px; }

/* ----- Menu terlipat ----- */
body.menu-terlipat { --rail-lebar:74px; }
body.menu-terlipat .rail { padding-left:8px; padding-right:8px; }
body.menu-terlipat .rail .teks, body.menu-terlipat .rail-nama, body.menu-terlipat .rail-peran, body.menu-terlipat .rail-brand .brand-teks, body.menu-terlipat .rail-group-body { display:none; }
body.menu-terlipat .rail-brand { justify-content:center; padding:4px 0 12px; }
body.menu-terlipat .rail .rail-gulung-btn { right:-2px !important; top:-4px !important; }
body.menu-terlipat .rail-profil { display:flex; justify-content:center; padding:6px; background:none; }
body.menu-terlipat .rail a.item, body.menu-terlipat .rail button.item-grup { justify-content:center; padding:11px 6px; margin:3px 2px; }
body.menu-terlipat .rail button.item-grup .chevron { display:none; }
body.menu-terlipat .main { margin-left:calc(var(--rail-lebar) + var(--rail-celah) * 2); }

/* ----- HP & tablet sempit ----- */
@media (max-width:860px) {
	.rail { transform:translateX(calc(-100% - 30px)); top:0; left:0; bottom:0; border-radius:0 24px 24px 0; }
	.rail.buka-mobile { transform:translateX(0); }
	.main, body.menu-terlipat .main { margin-left:0; }
	.topbar { margin:10px 10px 0; top:10px; padding:10px 12px; }
	.content { padding:14px 12px 24px; }
}

/* ============ Gaya v2: panel penuh tinggi navy-ungu seperti sistem Disdikpora ============ */
:root { --rail-lebar:270px; --rail-celah:0px; --rail-a:#13206b; --rail-b:#26268f; --rail-c:#432b9a; }
body { background:#eef1f7; }
.rail { top:0; left:0; bottom:0; border-radius:0; border:0; padding:12px 12px 14px; width:var(--rail-lebar);
	background:linear-gradient(185deg, var(--rail-a) 0%, var(--rail-b) 58%, var(--rail-c) 100%); box-shadow:4px 0 24px rgba(19,32,107,.28); }
.rail-profil-wrap { border-bottom:1px solid rgba(255,255,255,.14); padding:0 0 12px; }
.rail-brand { padding:2px 34px 10px 2px; }
.rail-brand .logo-tile { width:38px; height:38px; border-radius:11px; } .rail-brand .logo-tile i { color:var(--rail-b); font-size:18px; }
.rail-profil { display:flex; flex-direction:column; align-items:center; gap:3px; background:none; padding:10px 8px 4px; text-align:center; }
.rail-avatar { grid-row:auto; width:72px; height:72px; font-size:26px; border:3px solid rgba(255,255,255,.55); background:linear-gradient(135deg,#6b7df0,#8b5cf6); box-shadow:0 6px 18px rgba(0,0,0,.28); margin-bottom:6px; }
.rail-nama { text-align:center; font-size:15px; font-weight:800; white-space:normal; }
.rail-peran { text-align:center; font-size:10.5px; letter-spacing:.8px; }
.rail a.item, .rail button.item-grup { margin:1px 0; padding:11px 14px; border-radius:12px; font-weight:700; font-size:13.5px; color:#fff; }
.rail button.item-grup { width:100%; }
.rail a.item:hover, .rail button.item-grup:hover { background:rgba(255,255,255,.12); transform:none; }
.rail a.item.active { background:#fff; color:var(--rail-b); box-shadow:0 6px 16px rgba(0,0,0,.22); }
.rail a.item.active i { color:var(--rail-c); }
.rail button.item-grup.open { background:rgba(255,255,255,.14); }
.rail-group-body { margin:2px 0 6px 12px; padding-left:8px; border-left:2px solid rgba(255,255,255,.2); }
.rail-group-body a.active { color:var(--rail-b); } .rail-group-body a.active i { color:var(--rail-c); }
.rail .rail-gulung-btn { background:rgba(255,255,255,.2) !important; }
.main { margin-left:var(--rail-lebar); }
.topbar { margin:0; border-radius:0; top:0; padding:12px 24px; border:0; border-bottom:1px solid #e3e8f2; box-shadow:0 2px 10px rgba(28,44,122,.06); }
.topbar .judul-halaman { font-size:16px; font-weight:800; min-width:130px; }
.gs-kotak input, .gs-kotak input:focus { width:min(46vw,460px); border-radius:12px; padding:10px 54px 10px 38px; background:#f4f6fb; }
.gs-kotak input:focus { background:#fff; }
.content { padding:22px 24px 32px; }
.card { border:1px solid #e6eaf3; box-shadow:0 2px 12px rgba(28,44,122,.06); }
.btn-primary { box-shadow:0 4px 12px rgba(59,82,200,.3); }

/* banner dashboard: biru ke tosca dengan pola zigzag halus */
.dash-hero { background:
	repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 22px, rgba(255,255,255,0) 22px 44px),
	linear-gradient(110deg, #17287e 0%, #2447b8 55%, #1696b0 100%) !important; border-radius:16px; box-shadow:0 10px 26px rgba(28,44,122,.28); }

body.menu-terlipat { --rail-lebar:76px; }
body.menu-terlipat .rail { padding-left:9px; padding-right:9px; }
body.menu-terlipat .rail-avatar { width:44px; height:44px; font-size:16px; border-width:2px; }
body.menu-terlipat .main { margin-left:var(--rail-lebar); }
@media (max-width:860px) {
	.rail { border-radius:0; transform:translateX(-105%); }
	.topbar { margin:0; padding:10px 12px; }
	.gs-kotak input, .gs-kotak input:focus { width:38px; padding:10px 8px; }
	.gs-kotak input:focus { width:min(78vw,320px); }
}