/* ASAS MTsN 1 Bojonegoro - tema biru navy */
:root{
  --navy:#0b2a5b; --navy-dark:#071d42; --navy-mid:#123a7a;
  --sky:#eaf2fd; --sky-2:#cfe2fb; --blue:#2f6fd6;
  --text:#1b2b4b; --muted:#6b7a99; --sidebar-w:268px;
}
body{background:#f4f7fc;color:var(--text);font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:.94rem}
a{color:var(--blue)}
.btn-primary{--bs-btn-bg:var(--navy-mid);--bs-btn-border-color:var(--navy-mid);--bs-btn-hover-bg:var(--navy);--bs-btn-hover-border-color:var(--navy);--bs-btn-active-bg:var(--navy-dark);--bs-btn-active-border-color:var(--navy-dark)}
.btn-outline-primary{--bs-btn-color:var(--navy-mid);--bs-btn-border-color:var(--navy-mid);--bs-btn-hover-bg:var(--navy-mid);--bs-btn-hover-border-color:var(--navy-mid)}
.form-control:focus,.form-select:focus{border-color:#7fa8e8;box-shadow:0 0 0 .2rem rgba(47,111,214,.18)}

/* Layout */
.app-shell{min-height:100vh}
.app-main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}
.content{padding:1.5rem;flex:1}
.app-footer{padding:.9rem 1.5rem;color:var(--muted);font-size:.8rem;border-top:1px solid #e1e8f4;background:#fff}

/* Sidebar */
.sidebar{position:fixed;top:0;bottom:0;left:0;width:var(--sidebar-w);background:linear-gradient(180deg,var(--navy-dark),var(--navy));color:#cfe0fa;display:flex;flex-direction:column;z-index:1040;transition:transform .25s ease}
.sidebar-brand{display:flex;align-items:center;gap:.75rem;padding:1.1rem 1.2rem;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand img{background:#fff;border-radius:50%;padding:2px;object-fit:contain}
.sidebar-brand strong{display:block;font-size:1.1rem;letter-spacing:.08em}
.sidebar-brand small{display:block;font-size:.72rem;color:#9ec5fe;line-height:1.2}
.sidebar-nav{flex:1;overflow-y:auto;padding:.5rem .75rem}
.nav-group{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#7f9bd0;padding:.9rem .6rem .3rem}
.nav-item-link{display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;margin-bottom:2px;border-radius:.5rem;color:#cfe0fa;text-decoration:none;font-size:.9rem;cursor:pointer}
.nav-item-link i{font-size:1.05rem;width:1.2rem;text-align:center}
.nav-item-link:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item-link.active{background:#fff;color:var(--navy);font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.nav-item-link.disabled{opacity:.5;cursor:not-allowed}
.nav-item-link.disabled:hover{background:transparent;color:#cfe0fa}
.nav-item-link .soon{margin-left:auto;font-size:.62rem;font-style:normal;background:rgba(255,255,255,.14);padding:1px 6px;border-radius:9px}
.sidebar-logout{padding:.5rem .75rem 1rem;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-logout .nav-item-link{color:#ffb4bd}
.sidebar-backdrop{display:none}

/* Topbar */
.topbar{display:flex;align-items:center;gap:.75rem;padding:.7rem 1.5rem;background:#fff;border-bottom:1px solid #e1e8f4;position:sticky;top:0;z-index:1030}
.topbar-title{font-weight:700;color:var(--navy);font-size:1.1rem}
.badge-periode{background:var(--sky);color:var(--navy);font-weight:600;padding:.45rem .7rem;border-radius:2rem}
.user-btn{display:flex;align-items:center;gap:.5rem;border:0;background:transparent;font-weight:600;color:var(--text)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--navy-mid);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem}

/* Kartu */
.card{border:1px solid #e1e8f4;border-radius:.8rem;box-shadow:0 1px 3px rgba(11,42,91,.05)}
.card-header{background:#fff;border-bottom:1px solid #e9eff8;font-weight:600;color:var(--navy);border-radius:.8rem .8rem 0 0!important}
.stat-card{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.2rem}
.stat-icon{width:50px;height:50px;border-radius:.8rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--sky);color:var(--navy-mid);flex-shrink:0}
.stat-card.s-green .stat-icon{background:#e3f6ea;color:#1a7f45}
.stat-card.s-amber .stat-icon{background:#fff3d6;color:#a76a00}
.stat-card.s-pink .stat-icon{background:#fde5ee;color:#b0245a}
.stat-card.s-navy .stat-icon{background:var(--navy);color:#fff}
.stat-value{font-size:1.65rem;font-weight:700;line-height:1.1;color:var(--navy)}
.stat-label{color:var(--muted);font-size:.8rem}
.page-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1.1rem}
.page-head h1{font-size:1.3rem;margin:0;color:var(--navy);font-weight:700}
.table thead th{background:var(--sky);color:var(--navy);font-weight:600;border-bottom:0;white-space:nowrap}
.chart-box{position:relative;height:290px}
.empty-note{color:var(--muted);text-align:center;padding:2.5rem 1rem}

/* Halaman login / instalasi */
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:radial-gradient(circle at 15% 10%,#2f6fd6 0,transparent 40%),linear-gradient(135deg,var(--navy-dark),var(--navy) 55%,var(--navy-mid))}
.auth-card{width:100%;max-width:430px;background:#fff;border-radius:1.1rem;box-shadow:0 20px 50px rgba(0,0,0,.3);overflow:hidden}
.auth-head{text-align:center;padding:1.8rem 1.5rem 1.2rem;background:var(--sky)}
.auth-head img{width:76px;height:76px;object-fit:contain;background:#fff;border-radius:50%;padding:4px;box-shadow:0 3px 10px rgba(11,42,91,.2)}
.auth-head h1{font-size:1.05rem;margin:.8rem 0 .15rem;color:var(--navy);font-weight:700;letter-spacing:.02em}
.auth-head p{margin:0;color:var(--muted);font-size:.85rem}
.auth-form{padding:1.5rem}

/* Denah tempat duduk (tampilan layar) */
.denah-depan{text-align:center;font-size:.72rem;letter-spacing:.35em;color:var(--muted);margin-bottom:.3rem}
.denah-papan{background:var(--navy);color:#fff;text-align:center;padding:.5rem;border-radius:.5rem;font-weight:700;letter-spacing:.4em;margin-bottom:1rem}
.denah-scroll{overflow-x:auto;padding-bottom:.25rem}
.denah-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(118px,1fr));gap:.6rem;min-width:calc(var(--cols) * 124px)}
.seat{border:2px solid var(--navy-mid);border-radius:.6rem;background:#fff;padding:.4rem;text-align:center;cursor:pointer;min-height:98px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .15s,background .15s;overflow:hidden}
.seat:hover{box-shadow:0 0 0 3px rgba(47,111,214,.25)}
.seat.picked{background:#fff3d6;border-color:#d99a00;box-shadow:0 0 0 3px rgba(217,154,0,.35)}
.seat-empty{border-style:dashed;border-color:#9fb0cf;background:#f6f9fe;color:#8c9bb8}
.seat-na{visibility:hidden;cursor:default}
.seat-no{font-size:.62rem;letter-spacing:.12em;font-weight:700;color:var(--navy-mid);background:var(--sky);padding:0 .45rem;border-radius:.3rem;margin-bottom:.15rem}
.seat-num{font-weight:800;font-size:.95rem;color:var(--navy)}
.seat-name{font-size:.74rem;font-weight:600;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seat-kelas{font-size:.68rem;color:var(--muted)}
.seat-kosong{font-size:.75rem}
.denah-bawah{display:flex;gap:.8rem;align-items:center;margin:0 0 1rem}
.denah-bawah>div{flex:1}
.denah-bawah.pintu-kanan{flex-direction:row-reverse}
.denah-pengawas{border:2px solid var(--navy);border-radius:.5rem;text-align:center;padding:.5rem;font-weight:700;letter-spacing:.15em;background:var(--sky);color:var(--navy);font-size:.8rem}
.denah-pintu{border-left:5px solid #1a7f45;background:#e3f6ea;color:#1a7f45;padding:.5rem .7rem;border-radius:.4rem;font-weight:700;font-size:.78rem}
.denah-spacer{visibility:hidden}

/* Denah: warna jenjang dan penanda kolom */
.seat.t7{background:#eaf2fd;border-color:#2f6fd6}
.seat.t8{background:#fff1dc;border-color:#d98300}
.seat.t9{background:#e4f5ea;border-color:#1a7f45}
.legend-t7{background:#eaf2fd;color:#123a7a;border:1px solid #2f6fd6}
.legend-t8{background:#fff1dc;color:#7a4a00;border:1px solid #d98300}
.legend-t9{background:#e4f5ea;color:#145c33;border:1px solid #1a7f45}
.seat-col{text-align:center;font-size:.72rem;font-weight:700;color:var(--navy-mid);line-height:1.1}
.seat-col small{display:block;font-weight:500;color:var(--muted);font-size:.62rem}

/* Responsif */
@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.show{transform:none;box-shadow:0 0 30px rgba(0,0,0,.35)}
  .sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(7,29,66,.5);z-index:1035}
  .app-main{margin-left:0}
  .content{padding:1rem}
  .topbar{padding:.6rem 1rem}
}

/* Cetak: sembunyikan antarmuka aplikasi */
@media print{
  .no-print,.sidebar,.topbar,.app-footer,.sidebar-backdrop{display:none!important}
  .app-main{margin:0!important}
  .content{padding:0!important}
  body{background:#fff!important}
}