/* =====================================================================
   SIAKAD SMP Negeri 1 Kromengan — tema Biru Tua & Kuning Emas
   ===================================================================== */

:root {
  --navy-900:#0A2647;
  --navy-800:#0F3163;
  --navy-700:#153F7E;
  --blue-600:#1B4FA8;
  --blue-500:#2C6BD1;
  --blue-100:#D8E4F7;
  --blue-50:#EEF3FC;

  --gold-600:#D99A02;
  --gold-500:#F5B301;
  --gold-400:#FFC93C;
  --gold-100:#FFF3D1;

  --ink:#16213A;
  --muted:#6B7A96;
  --line:#E3E9F3;
  --canvas:#F4F7FC;
  --white:#FFFFFF;

  --ok:#17915F;
  --warn:#C98A00;
  --bad:#C8372D;

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(10,38,71,.05), 0 8px 24px -12px rgba(10,38,71,.18);
  --sidebar-w:266px;

  --bs-primary:#1B4FA8;
  --bs-primary-rgb:27,79,168;
  --bs-body-font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  --bs-body-color:#16213A;
}

/* ---------------- Dasar ---------------- */
body{
  font-family:var(--bs-body-font-family);
  background:var(--canvas);
  color:var(--ink);
  font-size:.945rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-.015em;color:var(--navy-900);}
a{color:var(--blue-600);text-decoration:none;}
a:hover{color:var(--navy-700);}
:focus-visible{outline:3px solid var(--gold-400);outline-offset:2px;border-radius:4px;}
.text-muted{color:var(--muted)!important;}
.tabular{font-variant-numeric:tabular-nums;}

/* ---------------- Sidebar ---------------- */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);
  background:linear-gradient(178deg,var(--navy-900) 0%,var(--navy-800) 62%,#0B2A55 100%);
  display:flex;flex-direction:column;z-index:1040;
  transition:transform .25s ease;
}
.sidebar-brand{
  display:flex;align-items:center;gap:.75rem;
  padding:1.15rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.09);
}
.brand-mark{
  width:42px;height:42px;flex:none;border-radius:11px;
  background:var(--gold-500);color:var(--navy-900);
  display:grid;place-items:center;font-weight:800;font-size:1.05rem;
  box-shadow:0 4px 14px rgba(245,179,1,.34);
}
.brand-text{line-height:1.15;min-width:0;}
.brand-text strong{color:#fff;font-size:1.06rem;letter-spacing:.01em;display:block;}
.brand-text span{color:#9DB4D8;font-size:.735rem;display:block;}

.sidebar-scroll{overflow-y:auto;padding:.85rem .75rem 1.25rem;flex:1;}
.sidebar-scroll::-webkit-scrollbar{width:6px;}
.sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px;}

.nav-heading{
  color:#89A4CE;font-size:.7rem;font-weight:600;letter-spacing:.04em;
  padding:1.1rem .85rem .4rem;
}
.sidebar .nav-link{
  display:flex;align-items:center;gap:.7rem;
  color:#C6D6EE;font-size:.9rem;font-weight:500;
  padding:.62rem .85rem;border-radius:10px;margin-bottom:2px;
  position:relative;transition:background .15s,color .15s;
}
.sidebar .nav-link i{font-size:1.05rem;width:20px;text-align:center;color:#8FAAD4;}
.sidebar .nav-link:hover{background:rgba(255,255,255,.08);color:#fff;}
.sidebar .nav-link:hover i{color:var(--gold-400);}
.sidebar .nav-link.active{background:rgba(245,179,1,.13);color:#fff;font-weight:600;}
.sidebar .nav-link.active i{color:var(--gold-500);}
.sidebar .nav-link.active::before{
  content:"";position:absolute;left:-.75rem;top:50%;transform:translateY(-50%);
  width:4px;height:22px;border-radius:0 4px 4px 0;background:var(--gold-500);
}
.sidebar .nav-link .badge{margin-left:auto;}

.sidebar-foot{
  padding:.9rem 1.1rem;border-top:1px solid rgba(255,255,255,.09);
  color:#7E99C4;font-size:.72rem;
}

/* ---------------- Kerangka halaman ---------------- */
.app-main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;}
.topbar{
  background:var(--white);border-bottom:1px solid var(--line);
  padding:.72rem 1.6rem;display:flex;align-items:center;gap:1rem;
  position:sticky;top:0;z-index:1020;
}
.topbar h1{font-size:1.06rem;margin:0;font-weight:700;}
.topbar .sub{font-size:.775rem;color:var(--muted);}
.btn-burger{
  display:none;background:none;border:0;font-size:1.4rem;color:var(--navy-900);padding:0 .3rem;
}
.ta-chip{
  background:var(--blue-50);color:var(--navy-700);border:1px solid var(--blue-100);
  padding:.34rem .75rem;border-radius:999px;font-size:.775rem;font-weight:600;white-space:nowrap;
}
.user-chip{display:flex;align-items:center;gap:.6rem;background:none;border:0;padding:.15rem;}
.user-chip img,.avatar{
  width:38px;height:38px;border-radius:50%;object-fit:cover;
  border:2px solid var(--gold-400);background:var(--blue-50);
}
.user-chip .nm{line-height:1.2;text-align:right;}
.user-chip .nm strong{display:block;font-size:.845rem;color:var(--ink);}
.user-chip .nm span{display:block;font-size:.715rem;color:var(--muted);}
.page{padding:1.6rem;flex:1;}
.page-foot{
  padding:1rem 1.6rem;border-top:1px solid var(--line);
  color:var(--muted);font-size:.78rem;background:var(--white);
}

/* ---------------- Kartu ---------------- */
.card{
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);background:var(--white);
}
.card-header{
  background:var(--white);border-bottom:1px solid var(--line);
  padding:.95rem 1.15rem;font-weight:700;color:var(--navy-900);
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  border-radius:var(--radius) var(--radius) 0 0!important;
}
.card-header .bi{color:var(--blue-600);}
.card-body{padding:1.15rem;}

/* Kartu statistik: garis aksen di kiri, bukan gradien */
.stat{
  display:flex;align-items:center;gap:.95rem;padding:1.1rem 1.15rem;
  border-left:4px solid var(--blue-600);
}
.stat-ic{
  width:48px;height:48px;flex:none;border-radius:12px;display:grid;place-items:center;
  font-size:1.35rem;background:var(--blue-50);color:var(--blue-600);
}
.stat .val{font-size:1.75rem;font-weight:800;line-height:1.1;color:var(--navy-900);}
.stat .lbl{font-size:.79rem;color:var(--muted);}
.stat.gold{border-left-color:var(--gold-500);}
.stat.gold .stat-ic{background:var(--gold-100);color:var(--gold-600);}
.stat.navy{border-left-color:var(--navy-900);}
.stat.navy .stat-ic{background:#E7EDF7;color:var(--navy-900);}
.stat.green{border-left-color:var(--ok);}
.stat.green .stat-ic{background:#E4F5ED;color:var(--ok);}

/* ---------------- Tabel ---------------- */
.table{--bs-table-color:var(--ink);margin-bottom:0;}
.table > :not(caption) > * > *{padding:.72rem .85rem;}
.table thead th{
  background:var(--blue-50);color:var(--navy-800);
  font-size:.775rem;font-weight:700;border-bottom:1px solid var(--blue-100);
  white-space:nowrap;
}
.table tbody tr:hover{background:#FAFCFF;}
.table td,.table th{border-color:var(--line);vertical-align:middle;}
.table-wrap{overflow-x:auto;border-radius:0 0 var(--radius) var(--radius);}
.tbl-num{width:52px;text-align:center;color:var(--muted);}
.tbl-act{width:1%;white-space:nowrap;}

/* ---------------- Tombol ---------------- */
.btn{border-radius:var(--radius-sm);font-weight:600;font-size:.875rem;padding:.5rem .95rem;}
.btn-primary{background:var(--blue-600);border-color:var(--blue-600);}
.btn-primary:hover,.btn-primary:focus{background:var(--navy-700);border-color:var(--navy-700);}
.btn-gold{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-900);}
.btn-gold:hover{background:var(--gold-400);border-color:var(--gold-400);color:var(--navy-900);}
.btn-outline-primary{color:var(--blue-600);border-color:#B9CCEA;}
.btn-outline-primary:hover{background:var(--blue-600);border-color:var(--blue-600);}
.btn-sm{padding:.32rem .6rem;font-size:.79rem;}
.btn-icon{width:32px;height:32px;padding:0;display:inline-grid;place-items:center;}

/* ---------------- Formulir ---------------- */
.form-label{font-weight:600;font-size:.83rem;color:var(--navy-800);margin-bottom:.35rem;}
.form-control,.form-select{
  border:1px solid #D5DEEC;border-radius:var(--radius-sm);
  padding:.55rem .75rem;font-size:.9rem;color:var(--ink);
}
.form-control:focus,.form-select:focus{
  border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(44,107,209,.14);
}
.form-control::placeholder{color:#A6B3C9;}
.form-text{font-size:.78rem;color:var(--muted);}
.input-group-text{background:var(--blue-50);border-color:#D5DEEC;color:var(--navy-700);}

/* ---------------- Badge & lencana nilai ---------------- */
.badge{font-weight:600;font-size:.72rem;padding:.36em .62em;border-radius:6px;}
.bg-soft-primary{background:var(--blue-50);color:var(--blue-600);}
.bg-soft-gold{background:var(--gold-100);color:var(--gold-600);}
.bg-soft-success{background:#E4F5ED;color:var(--ok);}
.bg-soft-danger{background:#FCE9E7;color:var(--bad);}
.bg-soft-warning{background:#FFF4DC;color:var(--warn);}
.bg-soft-info{background:#E5F1FA;color:#12698F;}
.bg-soft-secondary{background:#EDF0F5;color:var(--muted);}
.bg-soft-orange{background:#FDEEE1;color:#B2601A;}

.grade{
  width:34px;height:34px;border-radius:9px;display:inline-grid;place-items:center;
  font-weight:800;font-size:.92rem;
}
.grade-A{background:#E4F5ED;color:var(--ok);}
.grade-B{background:var(--blue-50);color:var(--blue-600);}
.grade-C{background:var(--gold-100);color:var(--gold-600);}
.grade-D{background:#FDEEE1;color:#B2601A;}
.grade-E{background:#FCE9E7;color:var(--bad);}

/* ---------------- Alert ---------------- */
.alert{border:0;border-left:4px solid;border-radius:var(--radius-sm);font-size:.885rem;padding:.8rem 1rem;}
.alert-success{background:#E9F7F0;border-color:var(--ok);color:#0E5B3C;}
.alert-danger{background:#FCEBE9;border-color:var(--bad);color:#8E2018;}
.alert-warning{background:#FFF6E2;border-color:var(--gold-500);color:#7A5500;}
.alert-info{background:var(--blue-50);border-color:var(--blue-500);color:var(--navy-800);}

/* ---------------- Kosong / empty state ---------------- */
.empty{text-align:center;padding:2.6rem 1rem;color:var(--muted);}
.empty i{font-size:2.4rem;color:#C3D0E4;display:block;margin-bottom:.6rem;}
.empty strong{display:block;color:var(--navy-800);margin-bottom:.25rem;}

/* ---------------- Halaman masuk ---------------- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;}
.login-visual{
  background:linear-gradient(165deg,var(--navy-900),var(--navy-700) 70%,#1B4FA8);
  color:#fff;padding:3.2rem;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.login-visual::after{
  content:"";position:absolute;right:-130px;bottom:-160px;width:430px;height:430px;
  border-radius:50%;border:44px solid rgba(245,179,1,.16);
}
.login-visual .lv-top{display:flex;align-items:center;gap:.85rem;position:relative;z-index:2;}
.login-visual h2{color:#fff;font-size:2.1rem;line-height:1.24;max-width:15ch;margin:0 0 .9rem;}
.login-visual p{color:#B9CCE8;max-width:42ch;font-size:.95rem;margin:0;}
.lv-mid{position:relative;z-index:2;}
.lv-list{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:.6rem;}
.lv-list li{display:flex;gap:.6rem;align-items:center;color:#CBDAF0;font-size:.885rem;}
.lv-list i{color:var(--gold-400);}
.login-visual footer{color:#8AA5CC;font-size:.78rem;position:relative;z-index:2;}

.login-form{display:grid;place-items:center;padding:2.5rem;background:var(--white);}
.login-box{width:100%;max-width:390px;}
.login-box h1{font-size:1.6rem;margin-bottom:.3rem;}
.login-box .lead-sm{color:var(--muted);font-size:.9rem;margin-bottom:1.7rem;}
.pw-toggle{border:1px solid #D5DEEC;border-left:0;background:var(--white);color:var(--muted);padding:0 .75rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;}

/* ---------------- Profil ---------------- */
.profile-head{
  background:linear-gradient(160deg,var(--navy-900),var(--navy-700));
  border-radius:var(--radius);color:#fff;padding:1.6rem;
  display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap;
}
.profile-head img{width:84px;height:84px;border-radius:18px;object-fit:cover;border:3px solid var(--gold-500);}
.profile-head h2{color:#fff;margin:0 0 .2rem;font-size:1.32rem;}
.profile-head .meta{color:#B9CCE8;font-size:.865rem;}

.detail-list dt{color:var(--muted);font-size:.79rem;font-weight:600;}
.detail-list dd{margin-bottom:.85rem;font-weight:500;}

/* ---------------- Jadwal ---------------- */
.day-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white);}
.day-head{background:var(--navy-900);color:#fff;padding:.6rem 1rem;font-weight:700;font-size:.9rem;
  display:flex;justify-content:space-between;align-items:center;}
.day-head span{color:var(--gold-400);font-weight:600;font-size:.76rem;}
.slot{display:flex;gap:.9rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);}
.slot:last-child{border-bottom:0;}
.slot .time{
  font-size:.78rem;font-weight:700;color:var(--navy-700);background:var(--blue-50);
  border-radius:8px;padding:.3rem .5rem;height:fit-content;white-space:nowrap;
}
.slot .info strong{display:block;font-size:.9rem;}
.slot .info small{color:var(--muted);}
.slot.now{background:#FFFCF2;}

/* ---------------- Cetak ---------------- */
@media print{
  .sidebar,.topbar,.page-foot,.no-print{display:none!important;}
  .app-main{margin-left:0;}
  .page{padding:0;}
  .card{box-shadow:none;border:1px solid #ccc;}
  body{background:#fff;font-size:11pt;}
}

/* ---------------- Responsif ---------------- */
@media (max-width:1200px){
  .login-wrap{grid-template-columns:1fr;}
  .login-visual{display:none;}
}
@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%);box-shadow:0 0 40px rgba(10,38,71,.3);}
  .sidebar.show{transform:translateX(0);}
  .app-main{margin-left:0;}
  .btn-burger{display:block;}
  .page{padding:1rem;}
  .topbar{padding:.65rem 1rem;}
  .user-chip .nm{display:none;}
}
.backdrop{
  position:fixed;inset:0;background:rgba(10,38,71,.45);z-index:1035;display:none;
}
.backdrop.show{display:block;}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}