/* ==========================================================================
   SIKESA - SMKN 3 SIGLI
   TEMA V4 — "ELEGAN PROFESIONAL"
   ------------------------------------------------------------------------
   File ini HANYA mengatur tampilan (di-load setelah Bootstrap 5.3).
   Tidak mengubah PHP/database. Aman di-refresh ulang kapan saja.

   Prinsip desain:
   - Anti-slop: tanpa glassmorphism, tanpa gradient ungu-pink generik,
     tanpa bayangan neon/glow, tanpa border-radius berlebihan.
   - Elegan: perpaduan tipografi serif (judul) + sans modern (UI),
     palet warna navy-teal tenang + aksen emas tipis.
   - Profesional: badge/alert bertone lembut, tabel rapi, fokus jelas.
   - Dinamis: transisi halus & micro-interaction ringan, bukan animasi
     berlebihan. Menghormati prefers-reduced-motion.
   - Responsif: mempertahankan & memperluas breakpoint mobile yang sudah ada.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* Brand — navy teal tenang, terinspirasi laut Aceh, versi lebih dalam & kaya */
  --brand-900:#0A2A38;
  --brand-800:#0D3648;
  --brand-700:#11475D;
  --brand-600:#166080;   /* warna utama tombol/aksen */
  --brand-500:#1F7B9C;
  --brand-400:#4C9CB8;
  --brand-100:#E3F0F4;
  --brand-50:#F3F9FB;

  /* Aksen emas — tipis, dipakai untuk penanda status aktif & highlight kecil */
  --gold:#B8912B;
  --gold-dark:#8F6F1E;
  --gold-light:#F8F0DA;

  /* Netral / tinta */
  --ink-900:#16232B;
  --ink-700:#3E4C55;
  --ink-500:#6C7A83;
  --ink-300:#9FACB3;

  --line:#E2E8EC;
  --line-strong:#CBD7DD;
  --paper:#F5F8F9;
  --white:#FFFFFF;

  /* Semantik — bertone lembut (tint), bukan warna Bootstrap default yang mencolok */
  --success:#1E8A5F; --success-bg:#E8F6EF; --success-line:#BCE4D1; --success-dark:#166B49;
  --danger:#C13B2E;  --danger-bg:#FBEAE8;  --danger-line:#F2C3BC; --danger-dark:#9B2E23;
  --warning:#AD7A17; --warning-bg:#FBF1DA; --warning-line:#EDD696;--warning-dark:#8A5F0F;
  --info:#2372A3;    --info-bg:#E8F2F8;    --info-line:#BEDCEC;  --info-dark:#1B5A80;
  --secondary:#5B6B75; --secondary-bg:#EEF1F2; --secondary-line:#D6DDE0;

  --shadow-xs:0 1px 2px rgba(15,40,52,.06);
  --shadow-sm:0 2px 6px rgba(15,40,52,.07),0 1px 2px rgba(15,40,52,.05);
  --shadow-md:0 10px 24px rgba(12,38,50,.09),0 3px 8px rgba(12,38,50,.06);
  --shadow-lg:0 20px 44px rgba(10,32,44,.16),0 6px 16px rgba(10,32,44,.08);

  --radius-sm:7px;
  --radius:11px;
  --radius-lg:18px;

  --ease:cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- Reset dasar & tipografi ---------- */
*,*::before,*::after{box-sizing:border-box}
html{width:100%;overflow-x:hidden;scroll-behavior:smooth}
body{
  width:100%;max-width:100%;overflow-x:hidden;margin:0;
  background:var(--paper)!important;
  background-image:radial-gradient(var(--line) 1px,transparent 1px)!important;
  background-size:22px 22px!important;
  color:var(--ink-700)!important;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{font-family:inherit;max-width:100%}
a{color:var(--brand-600);text-decoration:none}
a:hover{color:var(--brand-700)}
::selection{background:var(--brand-100);color:var(--brand-900)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:2px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-300)}

/* Judul halaman & seksi besar memakai serif elegan; UI tetap sans agar tetap
   mudah dibaca pada tabel & form yang padat data. */
main h2.fw-bold,
main h3.fw-bold,
.login-card h4,
#sidebar h5{
  font-family:'Inter',Georgia,serif!important;
  font-weight:600!important;
  letter-spacing:-.01em;
  color:var(--ink-900)!important;
}
main h4,main h5,main h6,.card-title,.modal-title{color:var(--ink-900)!important;font-weight:700}
.text-muted{color:var(--ink-500)!important}
.text-dark{color:var(--ink-900)!important}
main p.text-muted{color:var(--ink-500)!important}

/* Fokus dinamis: entrance halus untuk konten utama tiap navigasi halaman */
main.main-content{animation:sikesaFadeUp .45s var(--ease) both}
@keyframes sikesaFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Sidebar ---------- */
#sidebar{
  position:sticky;top:0;height:100vh;flex:0 0 264px;overflow-y:auto;z-index:1030;
  background:linear-gradient(185deg,var(--brand-900),var(--brand-800) 65%,var(--brand-900))!important;
  border-right:1px solid rgba(255,255,255,.06)!important;
  box-shadow:6px 0 24px rgba(6,20,28,.18)!important;
  scrollbar-width:thin;
}
#sidebar .border-secondary{border-color:rgba(255,255,255,.12)!important}
#sidebar h5,#sidebar .fw-bold{color:#fff!important}
#sidebar small,#sidebar .text-white-50{color:rgba(255,255,255,.62)!important}
#sidebar .fa-graduation-cap{color:var(--gold)!important}

#sidebar .nav-header{color:rgba(255,255,255,.42)!important;letter-spacing:.08em;font-size:.7rem!important}

#sidebar .nav-link{
  position:relative;
  color:rgba(255,255,255,.82)!important;
  border-radius:8px!important;
  background:transparent!important;
  padding:.55rem .75rem!important;
  transition:background-color .18s var(--ease),color .18s var(--ease),padding-left .18s var(--ease);
}
#sidebar .nav-link::before{
  content:"";position:absolute;left:-2px;top:8%;bottom:8%;width:3px;border-radius:3px;
  background:var(--gold);opacity:0;transform:scaleY(.4);transition:opacity .18s var(--ease),transform .18s var(--ease);
}
#sidebar .nav-link:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;padding-left:1rem!important}
#sidebar .nav-link.active,
#sidebar .nav-link.bg-primary{
  background:rgba(255,255,255,.1)!important;
  color:#fff!important;
  font-weight:600;
}
#sidebar .nav-link.active::before,
#sidebar .nav-link.bg-primary::before{opacity:1;transform:scaleY(1)}
#sidebar .nav-link i{width:20px;text-align:center;opacity:.9}
/* Unifikasi warna ikon Bootstrap bawaan agar tenang & konsisten di sidebar gelap */
#sidebar .nav-link i.text-info,
#sidebar .nav-link i.text-warning,
#sidebar .nav-link i.text-success,
#sidebar .nav-link i.text-primary,
#sidebar .nav-link i.text-secondary,
#sidebar .nav-link i.text-light{color:rgba(255,255,255,.75)!important}
#sidebar .nav-link.active i,
#sidebar .nav-link.bg-primary i{color:var(--gold)!important}

#sidebar .bg-primary.rounded-circle{background:var(--gold)!important;color:var(--brand-900)!important}
#sidebar .btn-outline-danger{
  color:#F3A99E!important;border-color:rgba(243,169,158,.4)!important;background:transparent!important;
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
#sidebar .btn-outline-danger:hover{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}

.width-20{width:20px;text-align:center}
.fs-7{font-size:.85rem}
.fs-8{font-size:.75rem}

/* Toggle menu mobile */
.mobile-menu-toggle{
  display:none;position:fixed;top:12px;left:12px;z-index:1100;width:44px;height:40px;padding:0;
  background:var(--brand-700)!important;border-color:var(--brand-700)!important;
  box-shadow:var(--shadow-md);border-radius:var(--radius-sm)!important;
}
.sidebar-overlay{display:none}
@media(max-width:767px){
  .mobile-menu-toggle{display:flex;align-items:center;justify-content:center}
  #sidebar{position:fixed!important;left:-280px;top:0;height:100vh!important;width:min(82vw,280px)!important;min-width:0!important;flex-basis:auto!important;transition:left .22s var(--ease);z-index:1090!important}
  body.sidebar-open{overflow:hidden}
  body.sidebar-open #sidebar{left:0}
  body.sidebar-open .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(8,22,30,.5);z-index:1080}
  .main-content{width:100%!important;padding-top:64px!important}
}
@media(min-width:768px){.main-content{width:auto}}

/* ---------- Konten utama ---------- */
.main-content{min-width:0}
main.bg-light,.bg-light{background:var(--paper)!important}

/* Banner sambutan dashboard: satu-satunya tempat gradasi dipakai, sengaja
   tenang (dua-tone brand, tanpa neon) supaya tetap terasa "dinamis" tanpa slop */
main .card.bg-primary,
main .card[style*="linear-gradient"]{
  background:linear-gradient(120deg,var(--brand-700),var(--brand-600) 60%,var(--brand-500))!important;
  border:none!important;box-shadow:var(--shadow-md)!important;
}
main .card.bg-primary .text-white-50{color:rgba(255,255,255,.8)!important}

/* ---------- Kartu ---------- */
.card{
  background:var(--white)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow-sm)!important;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.card-header{
  background:var(--white)!important;
  border-bottom:1px solid var(--line)!important;
  font-weight:700;color:var(--ink-900)!important;
}
.card-footer{background:var(--brand-50)!important;border-top:1px solid var(--line)!important}

/* Kartu/tautan yang memang interaktif (pintasan menu) — sedikit terangkat saat hover */
a.hover-shadow,
main a.border.rounded{
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease)!important;
  border-color:var(--line)!important;
}
a.hover-shadow:hover,
main a.border.rounded:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md)!important;
  border-color:var(--brand-400)!important;
  background:var(--white)!important;
}

/* Aksen kiri pada kartu statistik dashboard */
.border-start.border-primary{border-color:var(--brand-600)!important}
.border-start.border-success{border-color:var(--success)!important}
.border-start.border-warning{border-color:var(--gold)!important}
.border-start.border-info{border-color:var(--info)!important}
.border-start.border-danger{border-color:var(--danger)!important}

.bg-primary.bg-opacity-10{background-color:var(--brand-100)!important}
.bg-success.bg-opacity-10{background-color:var(--success-bg)!important}
.bg-warning.bg-opacity-10{background-color:var(--gold-light)!important}
.bg-info.bg-opacity-10{background-color:var(--info-bg)!important}
.bg-danger.bg-opacity-10{background-color:var(--danger-bg)!important}
.bg-primary.bg-opacity-10 i{color:var(--brand-600)!important}
.bg-warning.bg-opacity-10 i{color:var(--gold-dark)!important}

/* ---------- Tombol ---------- */
.btn{border-radius:var(--radius-sm)!important;font-weight:600;transition:transform .12s var(--ease),box-shadow .12s var(--ease),background-color .15s var(--ease),border-color .15s var(--ease)!important}
.btn:active{transform:translateY(1px)}
.btn.shadow-sm{box-shadow:var(--shadow-xs)!important}

.btn-primary{--bs-btn-bg:var(--brand-600);--bs-btn-border-color:var(--brand-600);--bs-btn-hover-bg:var(--brand-700);--bs-btn-hover-border-color:var(--brand-700);--bs-btn-active-bg:var(--brand-800);--bs-btn-active-border-color:var(--brand-800);--bs-btn-disabled-bg:var(--brand-400);--bs-btn-disabled-border-color:var(--brand-400)}
.btn-success{--bs-btn-bg:var(--success);--bs-btn-border-color:var(--success);--bs-btn-hover-bg:var(--success-dark);--bs-btn-hover-border-color:var(--success-dark);--bs-btn-active-bg:var(--success-dark);--bs-btn-active-border-color:var(--success-dark)}
.btn-danger{--bs-btn-bg:var(--danger);--bs-btn-border-color:var(--danger);--bs-btn-hover-bg:var(--danger-dark);--bs-btn-hover-border-color:var(--danger-dark);--bs-btn-active-bg:var(--danger-dark);--bs-btn-active-border-color:var(--danger-dark)}
.btn-warning{--bs-btn-bg:var(--gold);--bs-btn-border-color:var(--gold);--bs-btn-color:#fff;--bs-btn-hover-bg:var(--gold-dark);--bs-btn-hover-border-color:var(--gold-dark);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--gold-dark);--bs-btn-active-color:#fff}
.btn-info{--bs-btn-bg:var(--info);--bs-btn-border-color:var(--info);--bs-btn-color:#fff;--bs-btn-hover-bg:var(--info-dark);--bs-btn-hover-border-color:var(--info-dark);--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff}
.btn-secondary{--bs-btn-bg:var(--secondary);--bs-btn-border-color:var(--secondary);--bs-btn-hover-bg:var(--ink-700);--bs-btn-hover-border-color:var(--ink-700)}

.btn-outline-primary{--bs-btn-color:var(--brand-600);--bs-btn-border-color:var(--brand-600);--bs-btn-hover-bg:var(--brand-600);--bs-btn-hover-border-color:var(--brand-600)}
.btn-outline-danger{--bs-btn-color:var(--danger);--bs-btn-border-color:var(--danger);--bs-btn-hover-bg:var(--danger);--bs-btn-hover-border-color:var(--danger)}
.btn-outline-secondary{--bs-btn-color:var(--secondary);--bs-btn-border-color:var(--line-strong);--bs-btn-hover-bg:var(--secondary);--bs-btn-hover-border-color:var(--secondary)}

.btn-primary:hover,.btn-success:hover,.btn-danger:hover,.btn-warning:hover,.btn-info:hover,.btn-secondary:hover{
  box-shadow:var(--shadow-sm)!important;transform:translateY(-1px);
}

/* ---------- Form ---------- */
.form-label{color:var(--ink-700)!important;font-weight:600;font-size:.9rem}
.form-control,.form-select{
  background:var(--white)!important;color:var(--ink-900)!important;
  border:1px solid var(--line-strong)!important;border-radius:var(--radius-sm)!important;
  box-shadow:none!important;min-width:0;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.form-control:focus,.form-select:focus{
  border-color:var(--brand-500)!important;
  box-shadow:0 0 0 3px rgba(22,96,128,.14)!important;
}
.form-control::placeholder{color:var(--ink-300)}
.form-control:disabled,.form-select:disabled{background:var(--paper)!important;color:var(--ink-500)!important}
.form-check-input:checked{background-color:var(--brand-600)!important;border-color:var(--brand-600)!important}
.form-check-input:focus{box-shadow:0 0 0 3px rgba(22,96,128,.14)!important}
.input-group-text{background:var(--brand-50)!important;border:1px solid var(--line-strong)!important;color:var(--ink-700)!important}

/* ---------- Tabel ---------- */
table{width:100%;border-collapse:collapse}
.table-responsive{-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.table>:not(caption)>*>*{color:var(--ink-700)}
table thead.table-dark,table thead.table-dark th{
  background:var(--brand-900)!important;color:#fff!important;border-color:var(--brand-900)!important;
}
table thead.table-light,table thead.table-light th{
  background:var(--brand-50)!important;color:var(--ink-900)!important;border-color:var(--line)!important;
  text-transform:uppercase;letter-spacing:.04em;font-size:.76rem;font-weight:700;
}
table thead th{vertical-align:middle}
.table-hover>tbody>tr:hover>*{background:var(--brand-50)!important;color:var(--ink-900)}
.table>tbody>tr>td,.table>tbody>tr>th{border-color:var(--line)!important}
.sticky-top{background:inherit}

/* ---------- Badge ---------- */
.badge{font-weight:600;border-radius:99px!important;padding:.42em .75em;font-size:.76rem}
.badge.bg-primary{background:var(--brand-100)!important;color:var(--brand-700)!important}
.badge.bg-success{background:var(--success-bg)!important;color:var(--success-dark)!important}
.badge.bg-danger{background:var(--danger-bg)!important;color:var(--danger-dark)!important}
.badge.bg-warning{background:var(--gold-light)!important;color:var(--gold-dark)!important}
.badge.bg-info{background:var(--info-bg)!important;color:var(--info-dark)!important}
.badge.bg-secondary{background:var(--secondary-bg)!important;color:var(--secondary)!important}
.badge.bg-dark{background:var(--brand-900)!important;color:#fff!important}
.badge.text-dark{color:var(--ink-900)!important}

/* ---------- Alert ---------- */
.alert{border:1px solid transparent!important;border-radius:var(--radius-sm)!important;box-shadow:none!important}
.alert-success{background:var(--success-bg)!important;border-color:var(--success-line)!important;color:var(--success-dark)!important}
.alert-danger{background:var(--danger-bg)!important;border-color:var(--danger-line)!important;color:var(--danger-dark)!important}
.alert-warning{background:var(--gold-light)!important;border-color:var(--warning-line)!important;color:var(--gold-dark)!important}
.alert-info{background:var(--info-bg)!important;border-color:var(--info-line)!important;color:var(--info-dark)!important}
.alert .btn-close{opacity:.6}
.alert .btn-close:hover{opacity:1}

/* ---------- Modal ---------- */
.modal-content{border:none!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-lg)!important;overflow:hidden}
.modal-header{background:var(--brand-50)!important;border-bottom:1px solid var(--line)!important;padding:1.1rem 1.4rem}
.modal-title{font-weight:700}
.modal-body{padding:1.4rem}
.modal-footer{border-top:1px solid var(--line)!important;padding:1rem 1.4rem}
.modal-backdrop.show{opacity:.55}

/* ---------- Lain-lain: pagination, list-group, breadcrumb, accordion ---------- */
.page-link{color:var(--brand-600)!important;border-color:var(--line)!important}
.page-item.active .page-link{background:var(--brand-600)!important;border-color:var(--brand-600)!important}
.list-group-item{border-color:var(--line)!important}
.list-group-item.active{background:var(--brand-600)!important;border-color:var(--brand-600)!important}
.accordion-button:not(.collapsed){background:var(--brand-50)!important;color:var(--brand-700)!important}
.accordion-button:focus{box-shadow:0 0 0 3px rgba(22,96,128,.14)!important}
.breadcrumb-item.active{color:var(--ink-500)!important}
.btn-close{transition:opacity .15s var(--ease)}

/* ---------- Halaman login ---------- */
body.login-page{
  background:radial-gradient(circle at 20% 15%,var(--brand-700),var(--brand-900) 55%)!important;
  background-image:none!important;
}
.login-card{
  width:min(420px,100%);
  border-radius:var(--radius-lg)!important;
  box-shadow:var(--shadow-lg)!important;
  border:1px solid rgba(255,255,255,.5)!important;
}
.login-logo{max-height:72px;width:auto}
.login-card h4{color:var(--ink-900)!important}
.login-card small.text-muted{color:var(--ink-500)!important}

/* ---------- Responsif ---------- */
@media(max-width:767px){
  #sidebar{flex-basis:220px;width:220px!important;min-width:220px!important}
  .main-content{padding:14px!important}
  .card-body{overflow-wrap:anywhere}
  header{min-height:64px}
  table{font-size:12px}
  th,td{padding:8px 10px!important;white-space:nowrap}
  .overflow-x-auto table{min-width:max-content}
  form .grid{grid-template-columns:1fr!important}
}
@media(max-width:639px){
  .max-w-7xl,.max-w-6xl,.max-w-5xl,.max-w-4xl{width:100%;max-width:none!important}
  .p-8{padding:16px!important}.p-6{padding:16px!important}
  .px-8{padding-left:14px!important;padding-right:14px!important}
  .py-8{padding-top:16px!important;padding-bottom:16px!important}
  .gap-8{gap:16px!important}.gap-6{gap:14px!important}.gap-5{gap:12px!important}
  .btn,button[type="submit"]{min-height:40px}
  main h2.fw-bold,main h3.fw-bold{font-size:1.35rem!important}
}
@media(max-width:575px){
  #sidebar{flex-basis:200px;width:200px!important;min-width:200px!important}
  #sidebar .nav-link{font-size:.88rem;padding:.55rem .65rem}
  #sidebar .width-20{width:17px}
  main .card.bg-primary .card-body,main .card[style*="linear-gradient"] .card-body{flex-direction:column;align-items:flex-start!important;gap:.75rem}
}
@media(max-width:480px){
  .grid.grid-cols-2{grid-template-columns:1fr!important}
}

/* Halaman cetak: jangan dipengaruhi tema aplikasi */
@media print{
  body{background:#fff!important;color:#000!important}
  header,aside,nav,.mobile-menu-toggle{background:transparent!important;color:#000!important;box-shadow:none!important;display:none!important}
  .card{box-shadow:none!important;border-color:#ccc!important}
}


/* ==========================================================================
   SIKESA — TEMA "NAVY SEA PROFESSIONAL"
   Override visual — fungsi PHP/database tidak diubah.
   --------------------------------------------------------------------------
   Konsep:
   - Navy tua sebagai identitas utama dan navigasi.
   - Biru laut sebagai background aplikasi.
   - Putih sebagai bidang kerja agar data tetap sangat terbaca.
   - Aksen cyan/sea-blue dan gold tipis untuk status aktif.
   - Dinamis melalui hover, elevasi, indikator aktif, dan entrance halus.
   ========================================================================== */

:root{
  --brand-950:#061923;
  --brand-900:#082B3A;
  --brand-850:#0A3547;
  --brand-800:#0B4055;
  --brand-750:#0D4D64;
  --brand-700:#0F5A73;
  --brand-600:#117493;
  --brand-500:#1692B5;
  --brand-400:#46B4CF;
  --brand-200:#BFE8F1;
  --brand-100:#DDF3F7;
  --brand-50:#F0FAFC;

  --sea-bg:#DCEFF4;
  --sea-bg-2:#EAF7F9;
  --white:#FFFFFF;

  --ink-950:#071A22;
  --ink-900:#102C36;
  --ink-700:#36535E;
  --ink-500:#68808A;
  --line:#C9E0E6;
  --line-strong:#AFCBD4;

  --gold:#C39A35;
  --gold-dark:#96731F;
  --gold-light:#F8F0D9;

  --shadow-xs:0 1px 3px rgba(5,38,51,.06);
  --shadow-sm:0 5px 16px rgba(5,43,57,.08);
  --shadow-md:0 12px 30px rgba(5,43,57,.12);
  --shadow-lg:0 22px 50px rgba(4,31,43,.18);
}

/* Background utama: biru laut lembut, bukan abu-abu Bootstrap */
html,body{
  background:var(--sea-bg)!important;
}

body{
  color:var(--ink-700)!important;
  background-image:
    radial-gradient(circle at 8% 0%, rgba(70,180,207,.16), transparent 28%),
    radial-gradient(circle at 100% 90%, rgba(17,116,147,.10), transparent 30%)!important;
  background-size:auto!important;
}

/* Area kerja utama */
.main-content,
main.main-content,
main.bg-light,
.bg-light{
  background:transparent!important;
}

.main-content{
  position:relative;
  padding:1.5rem!important;
}

.main-content > .container-fluid{
  position:relative;
  z-index:1;
  max-width:1700px;
}

/* Garis identitas di sisi atas area kerja */
.main-content::before{
  content:"";
  display:block;
  height:4px;
  width:100%;
  margin:-1.5rem -1.5rem 1.5rem;
  width:calc(100% + 3rem);
  background:linear-gradient(90deg,var(--brand-900),var(--brand-500),var(--brand-200));
}

/* Sidebar navy tua */
#sidebar{
  flex:0 0 272px!important;
  width:272px!important;
  min-width:272px!important;
  background:
    radial-gradient(circle at 20% 0%, rgba(70,180,207,.16), transparent 30%),
    linear-gradient(180deg,var(--brand-950) 0%,var(--brand-900) 48%,var(--brand-850) 100%)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:8px 0 30px rgba(3,25,35,.20)!important;
}

#sidebar::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:2px;
  height:100%;
  background:linear-gradient(180deg,transparent,var(--brand-400),transparent);
  opacity:.45;
  pointer-events:none;
}

#sidebar .border-secondary{
  border-color:rgba(255,255,255,.13)!important;
}

#sidebar .fa-graduation-cap{
  color:var(--brand-400)!important;
  filter:drop-shadow(0 3px 8px rgba(70,180,207,.18));
}

#sidebar .nav-header{
  color:rgba(255,255,255,.45)!important;
  margin-top:1.15rem!important;
  letter-spacing:.11em!important;
}

#sidebar .nav-link{
  margin:.18rem 0!important;
  padding:.68rem .82rem!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  color:rgba(255,255,255,.78)!important;
  background:transparent!important;
}

#sidebar .nav-link::before{
  left:0!important;
  width:3px!important;
  background:var(--brand-400)!important;
  box-shadow:0 0 10px rgba(70,180,207,.25);
}

#sidebar .nav-link:hover{
  color:#fff!important;
  background:rgba(70,180,207,.10)!important;
  border-color:rgba(70,180,207,.10)!important;
  padding-left:1rem!important;
}

#sidebar .nav-link.active,
#sidebar .nav-link.bg-primary{
  color:#fff!important;
  background:linear-gradient(90deg,rgba(17,116,147,.40),rgba(17,116,147,.13))!important;
  border-color:rgba(70,180,207,.20)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 5px 16px rgba(0,20,29,.12);
}

#sidebar .nav-link.active::before,
#sidebar .nav-link.bg-primary::before{
  opacity:1!important;
  transform:scaleY(1)!important;
}

#sidebar .nav-link.active i,
#sidebar .nav-link.bg-primary i{
  color:var(--brand-400)!important;
}

#sidebar .nav-link i{
  color:rgba(255,255,255,.70)!important;
}

/* Brand/header internal sidebar */
#sidebar h5{
  letter-spacing:.02em;
}
#sidebar small{
  color:rgba(255,255,255,.58)!important;
}

/* Tombol mobile */
.mobile-menu-toggle{
  background:var(--brand-900)!important;
  border-color:var(--brand-900)!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(4,31,43,.22)!important;
}
.mobile-menu-toggle:hover{
  background:var(--brand-750)!important;
}

/* Heading halaman */
main h2.fw-bold,
main h3.fw-bold{
  color:var(--ink-950)!important;
  letter-spacing:-.025em!important;
}

main h2.fw-bold i,
main h3.fw-bold i{
  color:var(--brand-600)!important;
}

main .text-muted,
main p.text-muted{
  color:var(--ink-500)!important;
}

/* Welcome banner — navy/sea, lebih premium */
main .card.bg-primary,
main .card[style*="linear-gradient"]{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 25%,rgba(70,180,207,.25),transparent 25%),
    linear-gradient(120deg,var(--brand-950),var(--brand-800) 58%,var(--brand-600))!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:var(--shadow-md)!important;
}

main .card.bg-primary::after,
main .card[style*="linear-gradient"]::after{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:-70px;
  top:-85px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  box-shadow:0 0 0 22px rgba(255,255,255,.025),0 0 0 44px rgba(255,255,255,.018);
  pointer-events:none;
}

main .card.bg-primary .card-body,
main .card[style*="linear-gradient"] .card-body{
  position:relative;
  z-index:2;
}

main .card.bg-primary h2,
main .card.bg-primary p,
main .card[style*="linear-gradient"] h2,
main .card[style*="linear-gradient"] p{
  color:#fff!important;
}

/* Semua card: putih bersih di atas background laut */
.card{
  background:rgba(255,255,255,.97)!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  box-shadow:var(--shadow-sm)!important;
}

.card:hover{
  box-shadow:var(--shadow-md)!important;
}

.card-header{
  background:linear-gradient(180deg,#fff,var(--brand-50))!important;
  border-bottom:1px solid var(--line)!important;
  color:var(--ink-950)!important;
}

.card-footer{
  background:var(--brand-50)!important;
  border-top:1px solid var(--line)!important;
}

/* Kartu pintasan/menu dashboard */
main a.card,
main a.border.rounded,
a.hover-shadow{
  border-color:var(--line)!important;
  overflow:hidden;
}

main a.card:hover,
main a.border.rounded:hover,
a.hover-shadow:hover{
  transform:translateY(-4px);
  border-color:var(--brand-400)!important;
  box-shadow:var(--shadow-md)!important;
}

main a.card .fa-2x,
main a.card .fa-3x{
  color:var(--brand-600)!important;
}

/* Statistik */
.border-start.border-primary{border-color:var(--brand-600)!important}
.bg-primary.bg-opacity-10{
  background:var(--brand-100)!important;
}
.bg-primary.bg-opacity-10 i{
  color:var(--brand-600)!important;
}

/* Tombol utama */
.btn{
  border-radius:8px!important;
  font-weight:700!important;
}

.btn-primary{
  --bs-btn-bg:var(--brand-700);
  --bs-btn-border-color:var(--brand-700);
  --bs-btn-hover-bg:var(--brand-800);
  --bs-btn-hover-border-color:var(--brand-800);
  --bs-btn-active-bg:var(--brand-900);
  --bs-btn-active-border-color:var(--brand-900);
}

.btn-outline-primary{
  --bs-btn-color:var(--brand-700);
  --bs-btn-border-color:var(--brand-600);
  --bs-btn-hover-bg:var(--brand-700);
  --bs-btn-hover-border-color:var(--brand-700);
}

/* Form lebih modern */
.form-control,.form-select{
  border-color:var(--line-strong)!important;
  background:#fff!important;
}

.form-control:focus,.form-select:focus{
  border-color:var(--brand-500)!important;
  box-shadow:0 0 0 3px rgba(22,146,181,.13)!important;
}

.input-group-text{
  background:var(--brand-50)!important;
  border-color:var(--line-strong)!important;
}

/* Tabel profesional */
.table-responsive{
  border-radius:10px;
}

table thead.table-dark,
table thead.table-dark th{
  background:var(--brand-900)!important;
  color:#fff!important;
  border-color:var(--brand-900)!important;
}

table thead.table-light,
table thead.table-light th{
  background:var(--brand-100)!important;
  color:var(--ink-900)!important;
  border-color:var(--line)!important;
}

.table-hover>tbody>tr:hover>*{
  background:var(--brand-50)!important;
  color:var(--ink-950)!important;
}

/* Badge dan status */
.badge.bg-primary{
  background:var(--brand-100)!important;
  color:var(--brand-700)!important;
}

/* Modal */
.modal-content{
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  box-shadow:var(--shadow-lg)!important;
}

.modal-header{
  background:linear-gradient(180deg,var(--brand-50),#fff)!important;
  border-bottom:1px solid var(--line)!important;
}

.modal-title{
  color:var(--ink-950)!important;
}

/* Breadcrumb / pagination */
.page-link{
  color:var(--brand-700)!important;
}
.page-item.active .page-link{
  background:var(--brand-700)!important;
  border-color:var(--brand-700)!important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb{
  background:var(--brand-400);
  border-color:var(--sea-bg);
}
::-webkit-scrollbar-thumb:hover{
  background:var(--brand-600);
}

/* Login premium */
body.login-page{
  background:
    radial-gradient(circle at 15% 15%,rgba(70,180,207,.25),transparent 28%),
    radial-gradient(circle at 85% 85%,rgba(17,116,147,.25),transparent 30%),
    linear-gradient(135deg,var(--brand-950),var(--brand-800))!important;
  background-image:
    radial-gradient(circle at 15% 15%,rgba(70,180,207,.25),transparent 28%),
    radial-gradient(circle at 85% 85%,rgba(17,116,147,.25),transparent 30%),
    linear-gradient(135deg,var(--brand-950),var(--brand-800))!important;
}

.login-card{
  border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:var(--shadow-lg)!important;
}

/* Responsif */
@media(max-width:767px){
  #sidebar{
    width:min(86vw,290px)!important;
    min-width:0!important;
  }
  .main-content{
    padding:14px!important;
    padding-top:64px!important;
  }
  .main-content::before{
    margin:-64px -14px 14px;
    width:calc(100% + 28px);
  }
}

@media(prefers-reduced-motion:reduce){
  .card:hover,
  main a.card:hover,
  main a.border.rounded:hover,
  a.hover-shadow:hover{
    transform:none!important;
  }
}


/* ==========================================================================
   SIKESA DASHBOARD — visual direction based on the requested reference
   ========================================================================== */
.sikesa-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:92px;
}
.sikesa-logo-wrap{
  width:62px;
  height:62px;
  flex:0 0 62px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(222,243,247,.96));
  padding:5px;
  box-shadow:0 8px 22px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.35);
}
.sikesa-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
}
.sikesa-brand-text{min-width:0}
.sikesa-brand-text h5{font-size:1.08rem;letter-spacing:.01em}
.sikesa-brand-line{
  display:block;width:34px;height:2px;margin:5px 0 3px;
  background:linear-gradient(90deg,var(--brand-400),transparent);
}
.sikesa-brand-subtitle{font-size:.62rem;color:rgba(255,255,255,.48);display:block;white-space:nowrap}

.dashboard-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:64px;margin:-1.5rem -1.5rem 1.25rem;padding:0 1.5rem;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 18px rgba(5,43,57,.06);
  position:sticky;top:0;z-index:20;
}
.dashboard-topbar .topbar-left{display:flex;align-items:center;gap:10px;color:var(--ink-900)}
.dashboard-topbar .topbar-brand{font-weight:800;letter-spacing:.02em}
.dashboard-topbar .topbar-right{display:flex;align-items:center;gap:12px}
.topbar-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:9px;background:var(--brand-50);color:var(--brand-800);font-size:.78rem;font-weight:700;border:1px solid var(--line)}
.topbar-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--brand-900),var(--brand-600));color:#fff;font-weight:800;box-shadow:0 5px 12px rgba(8,43,58,.18)}

.dashboard-hero{
  position:relative;overflow:hidden;border:0!important;border-radius:16px!important;
  background:
    radial-gradient(circle at 92% 18%,rgba(70,180,207,.28),transparent 23%),
    radial-gradient(circle at 68% 100%,rgba(22,146,181,.18),transparent 30%),
    linear-gradient(120deg,var(--brand-950),var(--brand-800) 54%,var(--brand-600))!important;
  box-shadow:0 18px 40px rgba(5,43,57,.18)!important;
}
.dashboard-hero::before{
  content:"";position:absolute;inset:0;opacity:.15;
  background:linear-gradient(120deg,transparent 0 48%,rgba(255,255,255,.25) 48.2%,transparent 49% 100%);
  transform:skewX(-20deg) translateX(25%);
}
.dashboard-hero::after{
  content:"";position:absolute;width:310px;height:310px;right:-130px;bottom:-180px;border-radius:50%;border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 68px rgba(255,255,255,.018);
}
.dashboard-hero .hero-content{position:relative;z-index:2}
.dashboard-hero .hero-logo{width:76px;height:76px;object-fit:contain;border-radius:16px;background:rgba(255,255,255,.96);padding:5px;box-shadow:0 12px 24px rgba(0,0,0,.18)}
.dashboard-hero .hero-title{font-size:clamp(1.25rem,2.4vw,1.9rem);letter-spacing:-.025em}
.dashboard-hero .hero-meta{color:rgba(255,255,255,.68);font-size:.88rem}
.hero-date{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.9);font-size:.82rem;font-weight:700}

.dashboard-stat{
  height:100%;position:relative;overflow:hidden;border-radius:13px!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.dashboard-stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)!important;border-color:var(--brand-200)!important}
.dashboard-stat .stat-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--brand-100);color:var(--brand-700);font-size:1.15rem}
.dashboard-stat .stat-label{font-size:.73rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500);font-weight:800}
.dashboard-stat .stat-value{font-size:1.55rem;color:var(--ink-950);font-weight:800;line-height:1.15}
.dashboard-stat .stat-link{font-size:.73rem;color:var(--brand-600);font-weight:800;text-decoration:none}
.dashboard-stat .stat-link:hover{text-decoration:underline}

.dashboard-section-title{font-size:.96rem;font-weight:800;color:var(--ink-950);letter-spacing:-.01em}
.dashboard-section-title i{color:var(--brand-600)}
.dashboard-card{border-radius:13px!important;overflow:hidden}
.dashboard-card .card-header{padding:14px 18px!important}
.dashboard-card .card-body{padding:18px!important}
.dashboard-mini-note{font-size:.75rem;color:var(--ink-500)}
.dashboard-progress{height:7px;border-radius:99px;background:#E7F2F5;overflow:hidden}
.dashboard-progress>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand-700),var(--brand-400))}
.dashboard-quick{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:10px;text-decoration:none;background:#fff;transition:.2s ease}
.dashboard-quick:hover{transform:translateY(-2px);border-color:var(--brand-300);background:var(--brand-50);box-shadow:var(--shadow-sm)}
.dashboard-quick .quick-icon{width:40px;height:40px;flex:0 0 40px;border-radius:10px;display:grid;place-items:center;background:var(--brand-100);color:var(--brand-700)}
.dashboard-quick strong{font-size:.82rem;color:var(--ink-900);display:block}
.dashboard-quick small{font-size:.68rem;color:var(--ink-500)}
.dashboard-footer-note{font-size:.72rem;color:var(--ink-500);text-align:center;padding:12px 0 2px}

@media(max-width:767px){
  .dashboard-topbar{margin:-64px -14px 14px;padding:0 14px;min-height:58px}
  .dashboard-topbar .topbar-brand{display:none}
  .dashboard-topbar .topbar-left{margin-left:45px}
  .dashboard-topbar .topbar-right .topbar-pill{display:none}
  .dashboard-hero .hero-logo{width:58px;height:58px}
  .dashboard-hero .hero-date{margin-top:12px}
  .sikesa-brand{min-height:82px}
}


/* ==========================================================================
   SIKESA V5 — UNIVERSAL INTERNAL PAGES
   Semua halaman modul memakai bahasa visual yang sama dengan Dashboard.
   ========================================================================== */

:root{
  --brand-950:#041923;
  --brand-900:#062A3A;
  --brand-850:#083649;
  --brand-800:#0A4257;
  --brand-750:#0C5068;
  --brand-700:#0E607B;
  --brand-600:#147D9D;
  --brand-500:#1A9ABC;
  --brand-400:#55BCD2;
  --brand-300:#91D5E2;
  --brand-200:#C5EAF1;
  --brand-100:#E1F4F7;
  --brand-50:#F2FBFC;
  --sea-bg:#D8EDF3;
  --sea-bg-2:#EAF7F9;
  --ink-950:#071B24;
  --ink-900:#112E39;
  --ink-700:#3C5862;
  --ink-500:#70868F;
  --line:#C9E0E6;
  --line-strong:#AECBD4;
}

body.bg-light,
body{
  background-color:var(--sea-bg)!important;
  background-image:
    radial-gradient(circle at 0 0,rgba(85,188,210,.16),transparent 24%),
    radial-gradient(circle at 100% 100%,rgba(14,96,123,.10),transparent 28%)!important;
}

.main-content{
  min-width:0;
  background:transparent!important;
}

/* Header kecil di semua halaman modul */
.sikesa-pagebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:70px;
  margin:-1.5rem -1.5rem 1.35rem;
  padding:10px 1.5rem;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line);
  box-shadow:0 5px 20px rgba(4,42,56,.07);
  position:sticky;
  top:0;
  z-index:20;
}
.sikesa-pagebar-left{display:flex;align-items:center;gap:12px;min-width:0}
.sikesa-pagebar-icon{
  width:42px;height:42px;flex:0 0 42px;
  display:grid;place-items:center;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(145deg,var(--brand-700),var(--brand-900));
  box-shadow:0 7px 16px rgba(6,42,58,.18);
}
.sikesa-pagebar-kicker{
  color:var(--brand-600);
  font-size:.62rem;
  line-height:1.1;
  letter-spacing:.12em;
  font-weight:800;
  margin-bottom:3px;
}
.sikesa-pagebar-title{
  color:var(--ink-950);
  font-size:1.04rem;
  font-weight:800;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sikesa-pagebar-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.sikesa-pagebar-status,.sikesa-pagebar-date{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--brand-800);
  background:var(--brand-50);
  font-size:.72rem;
  font-weight:700;
}
.sikesa-pagebar-status span{
  width:7px;height:7px;border-radius:50%;
  background:#2BAA72;
  box-shadow:0 0 0 3px rgba(43,170,114,.12);
}

/* Sidebar identitas sekolah */
#sidebar{
  width:272px!important;
  min-width:272px!important;
  padding:1rem!important;
  background:
    radial-gradient(circle at 50% 0,rgba(85,188,210,.13),transparent 23%),
    linear-gradient(180deg,var(--brand-950),var(--brand-900) 52%,#073449)!important;
}
.sikesa-brand{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  gap:9px!important;
  min-height:0!important;
  padding-top:.25rem!important;
}
.sikesa-logo-wrap{
  width:76px!important;height:76px!important;
  flex:0 0 76px!important;
  border-radius:16px!important;
  background:#fff!important;
  padding:6px!important;
  box-shadow:0 10px 26px rgba(0,0,0,.22)!important;
}
.sikesa-brand-text{width:100%}
.sikesa-brand-text h5{
  font-family:'Inter',sans-serif!important;
  font-size:.92rem!important;
  font-weight:800!important;
  letter-spacing:.03em!important;
  white-space:nowrap;
}
.sikesa-brand-line{
  width:42px!important;
  height:2px!important;
  margin:6px auto 5px!important;
  background:linear-gradient(90deg,transparent,var(--brand-400),transparent)!important;
}
.sikesa-brand-subtitle{
  font-size:.58rem!important;
  letter-spacing:.08em!important;
  color:rgba(255,255,255,.52)!important;
}

/* Menu sidebar lebih dekat dengan referensi */
#sidebar .nav{
  gap:1px;
}
#sidebar .nav-item{
  margin-bottom:1px!important;
}
#sidebar .nav-link{
  min-height:39px;
  display:flex!important;
  align-items:center;
  font-size:.77rem!important;
  font-weight:600!important;
  letter-spacing:.005em;
}
#sidebar .nav-link i{
  width:20px!important;
  text-align:center;
  margin-right:.55rem!important;
  color:rgba(255,255,255,.66)!important;
}
#sidebar .nav-link.active,
#sidebar .nav-link.bg-primary{
  background:linear-gradient(90deg,rgba(20,125,157,.56),rgba(20,125,157,.18))!important;
  border-color:rgba(85,188,210,.18)!important;
}
#sidebar .nav-link.active i,
#sidebar .nav-link.bg-primary i{color:var(--brand-400)!important}

/* Area judul modul */
main .container-fluid > .d-flex.justify-content-between.align-items-center:first-of-type{
  padding:2px 0 3px;
}
main .container-fluid > .d-flex.justify-content-between.align-items-center:first-of-type h2,
main .container-fluid > .d-flex.justify-content-between.align-items-center:first-of-type h3{
  color:var(--ink-950)!important;
  font-weight:800!important;
}
main .container-fluid > .d-flex.justify-content-between.align-items-center:first-of-type h2 i,
main .container-fluid > .d-flex.justify-content-between.align-items-center:first-of-type h3 i{
  color:var(--brand-600)!important;
}

/* Hilangkan efek template lama yang terlalu datar */
.card.border-0,
.card.shadow-sm{
  border:1px solid var(--line)!important;
  box-shadow:var(--shadow-sm)!important;
}
.card.border-0:hover,
.card.shadow-sm:hover{
  box-shadow:var(--shadow-md)!important;
}

/* Panel filter / pencarian */
.card form .form-label{
  color:var(--ink-900)!important;
  font-size:.78rem!important;
  font-weight:700!important;
}
.form-control,.form-select{
  min-height:40px;
  border-radius:8px!important;
  border-color:var(--line-strong)!important;
  color:var(--ink-900)!important;
}
.form-control::placeholder{color:#9AAEB5!important}
.form-control:hover,.form-select:hover{border-color:var(--brand-300)!important}

/* Header tabel */
.table{
  color:var(--ink-700)!important;
  font-size:.78rem;
}
.table > :not(caption) > * > *{
  border-bottom-color:#E4EFF2!important;
}
.table thead th{
  white-space:nowrap;
  font-size:.70rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.table thead.table-dark,
.table thead.table-dark th{
  background:linear-gradient(90deg,var(--brand-950),var(--brand-800))!important;
  color:#fff!important;
}
.table tbody td{vertical-align:middle}
.table tbody tr{transition:background .16s ease}
.table-hover>tbody>tr:hover>*{
  background:#EFF9FB!important;
}

/* Button semantic — primary navy laut, success tetap hijau tapi lebih tenang */
.btn-success{
  --bs-btn-bg:#16845F;
  --bs-btn-border-color:#16845F;
  --bs-btn-hover-bg:#116D4E;
  --bs-btn-hover-border-color:#116D4E;
}
.btn-info{
  --bs-btn-bg:var(--brand-600);
  --bs-btn-border-color:var(--brand-600);
  --bs-btn-color:#fff;
}
.btn-outline-secondary{
  --bs-btn-color:var(--ink-700);
  --bs-btn-border-color:var(--line-strong);
  --bs-btn-hover-color:var(--brand-800);
  --bs-btn-hover-bg:var(--brand-50);
  --bs-btn-hover-border-color:var(--brand-300);
}

/* Alert menjadi panel yang elegan */
.alert{
  border-radius:10px!important;
  border-width:1px!important;
  box-shadow:var(--shadow-xs)!important;
}

/* Tabs/nav pills */
.nav-pills .nav-link{
  color:var(--brand-700);
  font-weight:700;
}
.nav-pills .nav-link.active{
  background:var(--brand-700)!important;
  color:#fff!important;
}

/* Dropdown */
.dropdown-menu{
  border:1px solid var(--line)!important;
  border-radius:10px!important;
  box-shadow:var(--shadow-md)!important;
  padding:.4rem!important;
}
.dropdown-item{
  border-radius:7px;
  font-size:.8rem;
  padding:.55rem .7rem;
}
.dropdown-item:hover{
  background:var(--brand-50)!important;
  color:var(--brand-800)!important;
}

/* Pagination */
.pagination{gap:3px}
.page-link{
  border-color:var(--line)!important;
  border-radius:7px!important;
  background:#fff!important;
}
.page-item.active .page-link{
  background:var(--brand-700)!important;
  color:#fff!important;
}

/* Progress bars */
.progress{
  height:7px!important;
  background:#E2F0F3!important;
  border-radius:99px!important;
}
.progress-bar{background:linear-gradient(90deg,var(--brand-700),var(--brand-400))!important}

/* Icon circle yang masih menggunakan warna Bootstrap */
.text-primary{color:var(--brand-600)!important}
.text-info{color:var(--brand-600)!important}
.bg-primary{background-color:var(--brand-700)!important}
.border-primary{border-color:var(--brand-600)!important}

/* Modal/form */
.modal-backdrop.show{opacity:.52!important}
.modal-content{overflow:hidden}
.modal-header{
  padding:1rem 1.15rem!important;
}
.modal-header .btn-close{opacity:.65}
.modal-footer{background:#F7FBFC;border-top:1px solid var(--line)!important}

/* Footer / bagian bawah halaman */
main.main-content hr{
  border-color:var(--line)!important;
  opacity:1;
}

/* Mobile */
@media(max-width:767px){
  .sikesa-pagebar{
    margin:-64px -14px 14px!important;
    min-height:58px!important;
    padding:8px 14px!important;
  }
  .sikesa-pagebar-left{margin-left:42px}
  .sikesa-pagebar-icon{width:35px;height:35px;flex-basis:35px;font-size:.82rem}
  .sikesa-pagebar-kicker{font-size:.5rem}
  .sikesa-pagebar-title{font-size:.86rem}
  .sikesa-pagebar-right{display:none}
  #sidebar{width:min(88vw,300px)!important;min-width:0!important}
  .sikesa-logo-wrap{width:68px!important;height:68px!important;flex-basis:68px!important}
  main .container-fluid > .d-flex.justify-content-between.align-items-center:first-of-type{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
    gap:12px;
  }
}

@media(min-width:768px){
  .main-content > .container-fluid{max-width:1680px}
}

/* ===== BACKGROUND REFERENSI: NAVY + ALIRAN GELOMBANG BIRU LAUT ===== */
html,body{background:#061b35!important}
body{
  background-color:#061b35!important;
  background-image:url('assets/sea-wave-bg.svg')!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
  background-size:cover!important;
  background-attachment:fixed!important;
}
.main-content{
  position:relative!important;
  isolation:isolate;
  background:rgba(4,35,70,.18)!important;
}
.main-content::after{
  content:"";
  position:fixed;
  inset:0 0 0 0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(2,27,56,.08),rgba(5,61,100,.18) 55%,rgba(1,28,58,.26));
}
/* area kerja transparan supaya gelombang terlihat seperti referensi */
main.main-content,main.bg-light,.bg-light{background-color:transparent!important}
/* pagebar tetap terbaca di atas background gelombang */
.sikesa-pagebar{
  background:rgba(7,43,76,.78)!important;
  border-color:rgba(130,211,239,.20)!important;
  box-shadow:0 10px 30px rgba(0,20,40,.18)!important;
  backdrop-filter:blur(8px);
}
.sikesa-pagebar-title,.sikesa-pagebar-kicker{color:#fff!important}
.sikesa-pagebar-kicker{color:rgba(196,235,246,.78)!important}
/* Card putih tetap solid seperti gambar referensi */
.card{background:rgba(255,255,255,.98)!important}


/* ==========================================================================
   TYPOGRAPHY SYSTEM — INTER (GLOBAL)
   Seluruh halaman SIKESA menggunakan satu keluarga font agar konsisten
   dengan dashboard referensi.
   ========================================================================== */
html, body, button, input, select, textarea, .btn, .form-control, .form-select,
.table, .dropdown-menu, .modal, .popover, .tooltip, .pagination, .alert,
.nav, .nav-link, .card, .card-header, .card-body, .card-footer, label,
small, .small {
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif!important;
}

body{font-feature-settings:'cv02','cv03','cv04','cv11';}

h1,h2,h3,h4,h5,h6,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif!important;
  font-weight:700;
  letter-spacing:-.02em;
}

.fw-bold{font-weight:700!important}
.fw-semibold{font-weight:600!important}
.fw-medium{font-weight:500!important}

/* Hierarki tipografi seperti referensi */
.sidebar-brand-title{font-weight:700!important;letter-spacing:-.015em}
.page-title{font-weight:700!important;letter-spacing:-.025em}
.stat-number{font-weight:800!important;letter-spacing:-.035em}
.table th{font-weight:600!important}
.btn{letter-spacing:-.005em}


/* ==========================================================================
   FINAL LOGO FIX — logo sekolah tanpa kotak/background putih
   ========================================================================== */
.sikesa-logo-wrap{
  background:transparent!important;
  padding:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.sikesa-logo{
  background:transparent!important;
  border-radius:0!important;
  padding:0!important;
  box-shadow:none!important;
  mix-blend-mode:normal!important;
}
.dashboard-hero .hero-logo{
  background:transparent!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.login-logo,
.brand-logo-img{
  background:transparent!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* ========================================================================== 
   SIKESA TEMPLATE V5 — DARK INDIGO
   Penyelarasan visual dengan Portal Kesiswaan. Hanya CSS; susunan, isi,
   tautan, modul, PHP, dan database tidak diubah.
   ========================================================================== */
:root{
  --ks-bg:#070A13;
  --ks-sidebar:#0D1627;
  --ks-surface:#0F172A;
  --ks-surface-2:#111A2E;
  --ks-input:#080E1D;
  --ks-line:#202C43;
  --ks-line-soft:#18243A;
  --ks-text:#F8FAFC;
  --ks-muted:#94A3B8;
  --ks-subtle:#64748B;
  --ks-purple:#5746E8;
  --ks-purple-hover:#6657F2;
  --ks-purple-soft:rgba(87,70,232,.14);
  --ks-green:#06A77D;
  --ks-radius:15px;
  --ks-shadow:0 14px 36px rgba(0,0,0,.22);

  --brand-950:#070A13;
  --brand-900:#0D1627;
  --brand-800:#111A2E;
  --brand-700:#5746E8;
  --brand-600:#6252EB;
  --brand-500:#7568F2;
  --brand-400:#8D82F6;
  --brand-100:#242047;
  --brand-50:#15172B;
  --ink-950:#F8FAFC;
  --ink-900:#F1F5F9;
  --ink-700:#CBD5E1;
  --ink-500:#94A3B8;
  --line:#202C43;
  --line-strong:#334155;
  --paper:#070A13;
  --white:#0F172A;
}

html,body,body.bg-light{
  background:var(--ks-bg)!important;
  background-image:none!important;
  color:var(--ks-muted)!important;
}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif!important;
  font-size:14px;
}
::selection{background:var(--ks-purple);color:#fff}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:var(--ks-sidebar)}
::-webkit-scrollbar-thumb{background:#293650;border:0;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#3B4965}

/* Sidebar mengikuti proporsi dan warna aplikasi Kesiswaan. */
#sidebar{
  flex:0 0 254px!important;
  width:254px!important;
  min-width:254px!important;
  padding:14px 15px!important;
  background:var(--ks-sidebar)!important;
  background-image:none!important;
  border-right:1px solid var(--ks-line)!important;
  box-shadow:none!important;
}
#sidebar::after{display:none!important}
#sidebar .overflow-y-auto{padding-right:2px}
#sidebar .sikesa-brand{
  min-height:58px!important;
  margin:0 -15px 18px!important;
  padding:0 15px 14px!important;
  gap:11px!important;
  border-color:var(--ks-line)!important;
}
#sidebar .sikesa-logo-wrap{
  width:40px!important;height:40px!important;flex:0 0 40px!important;
  padding:4px!important;border:1px solid #334155!important;border-radius:12px!important;
  background:#111C30!important;
}
#sidebar .sikesa-logo{width:100%!important;height:100%!important;object-fit:contain!important}
#sidebar .sikesa-brand-text h5{
  color:#fff!important;font-size:.91rem!important;line-height:1.15!important;
  font-weight:800!important;letter-spacing:-.025em!important;white-space:nowrap;
}
#sidebar .sikesa-brand-line{display:none!important}
#sidebar .sikesa-brand-subtitle{
  margin-top:4px;color:#8B82F6!important;font-size:.60rem!important;
  font-weight:700;letter-spacing:.12em!important;
}
#sidebar .nav{gap:2px}
#sidebar .nav-header{
  margin:15px 0 6px!important;padding:0 11px!important;
  color:#7C8BA3!important;font-size:.62rem!important;line-height:1.2;
  font-weight:800!important;letter-spacing:.10em!important;
}
#sidebar .nav-link{
  margin:0!important;padding:10px 11px!important;min-height:40px;
  display:flex!important;align-items:center;border:0!important;border-radius:11px!important;
  color:#94A3B8!important;background:transparent!important;
  font-size:.80rem!important;font-weight:600!important;line-height:1.25;
  transition:background .16s ease,color .16s ease,transform .16s ease!important;
}
#sidebar .nav-link::before{display:none!important}
#sidebar .nav-link:hover{
  padding-left:11px!important;color:#F8FAFC!important;background:#172238!important;
  transform:translateX(2px);
}
#sidebar .nav-link.active,#sidebar .nav-link.bg-primary{
  color:#fff!important;background:var(--ks-purple)!important;
  box-shadow:0 8px 18px rgba(87,70,232,.24)!important;
}
#sidebar .nav-link i,#sidebar .nav-link i[class*="text-"]{
  width:20px!important;margin-right:.55rem!important;color:#91A0B8!important;opacity:1!important;
}
#sidebar .nav-link.active i,#sidebar .nav-link.bg-primary i{color:#fff!important}
#sidebar > .pt-3{
  margin:12px -15px -14px!important;padding:14px 15px!important;
  border-color:var(--ks-line)!important;background:#0B1322;
}
#sidebar .bg-primary.rounded-circle{
  width:36px!important;height:36px!important;background:#242352!important;
  color:#A9A1FF!important;border:1px solid #47408B;
}
#sidebar .btn-outline-danger{
  min-height:34px;color:#94A3B8!important;border-color:var(--ks-line)!important;
  background:#101A2D!important;
}
#sidebar .btn-outline-danger:hover{color:#fff!important;background:#B83246!important;border-color:#B83246!important}

/* Area konten, header halaman dan ritme ruang. */
.main-content,main.main-content,main.bg-light,.bg-light{
  background:var(--ks-bg)!important;background-image:none!important;
}
.main-content{padding:0 32px 32px!important;position:relative!important}
.main-content::before,.main-content::after{display:none!important}
.main-content>.container-fluid{max-width:1680px!important;padding:0!important}
.sikesa-pagebar{
  min-height:61px!important;margin:0 -32px 31px!important;padding:11px 32px!important;
  border:0!important;border-bottom:1px solid var(--ks-line)!important;border-radius:0!important;
  background:var(--ks-sidebar)!important;box-shadow:none!important;backdrop-filter:none!important;
}
.sikesa-pagebar-icon{
  width:37px!important;height:37px!important;flex:0 0 37px!important;border-radius:10px!important;
  color:#AAA4FF!important;background:var(--ks-purple-soft)!important;border:1px solid rgba(117,104,242,.35)!important;
}
.sikesa-pagebar-kicker{color:var(--ks-subtle)!important;font-size:.58rem!important;letter-spacing:.09em!important}
.sikesa-pagebar-title{color:var(--ks-text)!important;font-size:1rem!important;font-weight:800!important}
.sikesa-pagebar-status,.sikesa-pagebar-date{
  color:#94A3B8!important;background:#111B2E!important;border:1px solid var(--ks-line)!important;
  border-radius:9px!important;
}
.sikesa-pagebar-status span{background:#23C997!important;box-shadow:0 0 0 3px rgba(35,201,151,.12)!important}

/* Semua judul dan teks mengikuti hierarki referensi. */
main h1,main h2,main h3,main h4,main h5,main h6,
main h2.fw-bold,main h3.fw-bold,.card-title,.modal-title{
  color:var(--ks-text)!important;font-family:'Inter',sans-serif!important;
}
main h2.fw-bold,main h3.fw-bold{font-weight:800!important;letter-spacing:-.035em!important}
main h2.fw-bold i,main h3.fw-bold i{color:#A9A1FF!important}
.text-muted,main .text-muted,main p.text-muted,small,.small{color:var(--ks-subtle)!important}
.text-dark{color:var(--ks-text)!important}
main a{color:#A9A1FF}
main a:hover{color:#C3BEFF}

/* Panel dan kartu gelap. */
.card,.card.border-0,.card.shadow-sm,.buku-card{
  color:var(--ks-muted)!important;background:var(--ks-surface)!important;
  border:1px solid var(--ks-line)!important;border-radius:var(--ks-radius)!important;
  box-shadow:none!important;
}
.card:hover,.card.border-0:hover,.card.shadow-sm:hover{box-shadow:none!important;transform:none!important}
.card-header{
  color:var(--ks-text)!important;background:var(--ks-surface)!important;
  border-bottom:1px solid var(--ks-line)!important;border-radius:var(--ks-radius) var(--ks-radius) 0 0!important;
  padding:16px 20px!important;
}
.card-body{color:var(--ks-muted)}
.card-footer{background:#0D1526!important;border-top:1px solid var(--ks-line)!important}
main .card.bg-primary,main .card[style*="linear-gradient"],.dashboard-hero{
  color:#fff!important;background:#11172D!important;background-image:none!important;
  border:1px solid #39356D!important;border-radius:22px!important;
  box-shadow:none!important;
}
main .card.bg-primary::after,main .card[style*="linear-gradient"]::after,.dashboard-hero::before{display:none!important}
main .card.bg-primary .text-white-50,main .card[style*="linear-gradient"] .text-white-50{color:#9CA8BE!important}
main a.card,main a.border.rounded,a.hover-shadow{
  color:var(--ks-muted)!important;background:var(--ks-surface)!important;border-color:var(--ks-line)!important;
}
main a.card:hover,main a.border.rounded:hover,a.hover-shadow:hover{
  color:#fff!important;background:var(--ks-surface-2)!important;border-color:#443F86!important;
  transform:translateY(-2px)!important;box-shadow:var(--ks-shadow)!important;
}

/* Form dan filter. */
.card form .form-label,.form-label,label{color:#CBD5E1!important;font-weight:600!important}
.form-control,.form-select,.input-group-text,textarea.form-control{
  min-height:44px;color:#CBD5E1!important;background:var(--ks-input)!important;
  border:1px solid var(--ks-line)!important;border-radius:11px!important;
}
.input-group>.input-group-text{border-radius:11px 0 0 11px!important}
.input-group>.form-control:not(:first-child){border-radius:0 11px 11px 0!important}
.form-control::placeholder{color:#516079!important}
.form-control:hover,.form-select:hover{border-color:#3A4862!important}
.form-control:focus,.form-select:focus{
  color:#fff!important;background:var(--ks-input)!important;border-color:#685AF0!important;
  box-shadow:0 0 0 3px rgba(98,82,235,.15)!important;
}
.form-select{color-scheme:dark}
.form-check-input{background-color:var(--ks-input);border-color:#43506A}
.form-check-input:checked{background-color:var(--ks-purple);border-color:var(--ks-purple)}

/* Tombol dan kontrol. */
.btn{min-height:40px;border-radius:11px!important;font-size:.78rem;font-weight:700!important;padding:.58rem .95rem!important}
.btn-sm{min-height:33px;padding:.40rem .65rem!important;border-radius:9px!important}
.btn-primary,.bg-primary{
  --bs-btn-bg:var(--ks-purple);--bs-btn-border-color:var(--ks-purple);
  --bs-btn-hover-bg:var(--ks-purple-hover);--bs-btn-hover-border-color:var(--ks-purple-hover);
  --bs-btn-active-bg:#4939D2;--bs-btn-active-border-color:#4939D2;
}
.btn-primary{box-shadow:0 7px 18px rgba(87,70,232,.20)}
.btn-success{
  --bs-btn-bg:var(--ks-green);--bs-btn-border-color:var(--ks-green);
  --bs-btn-hover-bg:#078D6C;--bs-btn-hover-border-color:#078D6C;
}
.btn-secondary{--bs-btn-bg:#263248;--bs-btn-border-color:#263248;--bs-btn-hover-bg:#33415A;--bs-btn-hover-border-color:#33415A}
.btn-outline-primary{--bs-btn-color:#AAA4FF;--bs-btn-border-color:#4D4786;--bs-btn-hover-bg:var(--ks-purple);--bs-btn-hover-border-color:var(--ks-purple)}
.btn-outline-secondary{--bs-btn-color:#94A3B8;--bs-btn-border-color:#334155;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#263248;--bs-btn-hover-border-color:#3E4D67}
.btn-outline-danger{--bs-btn-color:#FB7185;--bs-btn-border-color:#713648;--bs-btn-hover-bg:#B83246;--bs-btn-hover-border-color:#B83246}

/* Tabel seperti daftar data pada aplikasi Kesiswaan. */
.table-responsive{border-radius:0 0 var(--ks-radius) var(--ks-radius)!important}
.table,.buku-table{margin:0!important;color:var(--ks-muted)!important;font-size:.77rem!important;--bs-table-bg:transparent;--bs-table-color:var(--ks-muted)}
.table>:not(caption)>*>*,.buku-table>:not(caption)>*>*{
  padding:13px 15px!important;color:var(--ks-muted)!important;background:transparent!important;
  border-bottom:1px solid var(--ks-line-soft)!important;box-shadow:none!important;
}
.table thead th,.buku-table thead th,
table thead.table-dark th,table thead.table-light th{
  padding-top:14px!important;padding-bottom:14px!important;color:#718099!important;
  background:#090F1F!important;background-image:none!important;border-color:var(--ks-line)!important;
  font-size:.64rem!important;font-weight:800!important;letter-spacing:.055em!important;text-transform:uppercase;
}
.table tbody tr,.buku-table tbody tr{background:var(--ks-surface)!important}
.table tbody td,.buku-table tbody td{color:#94A3B8!important;vertical-align:middle!important}
.table tbody td strong,.table tbody td.fw-bold,.table tbody td.fw-semibold,
.buku-table tbody td strong,.buku-table tbody td.fw-semibold{color:#E2E8F0!important}
.table-hover>tbody>tr:hover>*,.buku-table.table-hover>tbody>tr:hover>*{background:#121C30!important;color:#CBD5E1!important}
.table tfoot td,.table tfoot th{background:#0B1323!important;color:#CBD5E1!important}

/* Badge, alert, tabs, pagination, modal. */
.badge{padding:.38rem .58rem!important;border-radius:999px!important;font-size:.62rem!important;letter-spacing:.02em}
.badge.bg-success{color:#5EEBC0!important;background:rgba(6,167,125,.14)!important;border:1px solid rgba(6,167,125,.32)}
.badge.bg-primary{color:#B5AFFF!important;background:rgba(87,70,232,.16)!important;border:1px solid rgba(117,104,242,.34)}
.badge.bg-warning{color:#FCD77C!important;background:rgba(217,160,35,.14)!important;border:1px solid rgba(217,160,35,.30)}
.badge.bg-danger{color:#FDA4AF!important;background:rgba(190,50,73,.14)!important;border:1px solid rgba(190,50,73,.30)}
.badge.bg-info{color:#7DD3FC!important;background:rgba(14,165,233,.13)!important;border:1px solid rgba(14,165,233,.28)}
.alert{color:#CBD5E1!important;background:#111A2D!important;border:1px solid var(--ks-line)!important;box-shadow:none!important}
.alert-info{color:#A5D8FF!important;border-color:#20476A!important;background:#0C2136!important}
.alert-warning{color:#F4D48A!important;border-color:#584421!important;background:#241C0D!important}
.alert-danger{color:#FDA4AF!important;border-color:#633044!important;background:#25101A!important}
.alert-success{color:#72E6C2!important;border-color:#1B5A49!important;background:#0A241D!important}
.nav-tabs{border-color:var(--ks-line)!important}
.nav-tabs .nav-link{color:#94A3B8!important;border-color:transparent!important}
.nav-tabs .nav-link.active{color:#fff!important;background:var(--ks-surface)!important;border-color:var(--ks-line) var(--ks-line) var(--ks-surface)!important}
.pagination .page-link{color:#94A3B8!important;background:var(--ks-surface)!important;border-color:var(--ks-line)!important}
.page-item.active .page-link{color:#fff!important;background:var(--ks-purple)!important;border-color:var(--ks-purple)!important}
.modal-content,.dropdown-menu{
  color:var(--ks-muted)!important;background:var(--ks-surface)!important;border:1px solid var(--ks-line)!important;box-shadow:var(--ks-shadow)!important;
}
.modal-header,.modal-footer{background:#0D1526!important;border-color:var(--ks-line)!important}
.btn-close{filter:invert(1) grayscale(1)}
.dropdown-item{color:#A8B4C7!important}
.dropdown-item:hover{color:#fff!important;background:#172238!important}
.list-group-item{color:#A8B4C7!important;background:var(--ks-surface)!important;border-color:var(--ks-line)!important}
.progress{background:#202B40!important}.progress-bar{background:var(--ks-purple)!important;background-image:none!important}

/* Login diselaraskan tanpa mengubah dua-panel dan isinya. */
body.login-page{
  background:#070A13!important;background-image:radial-gradient(circle at 20% 10%,rgba(87,70,232,.14),transparent 32%)!important;
}
.brand-section-hero{
  background:#10172B!important;background-image:none!important;border:1px solid #343266!important;
  border-radius:22px!important;box-shadow:none!important;
}
.brand-section-hero::after{background:radial-gradient(circle at 85% 15%,rgba(117,104,242,.14),transparent 33%)!important}
.hero-gold-accent{color:#AAA4FF!important}
.card.login-card{
  color:#fff!important;background:#0F172A!important;border:1px solid var(--ks-line)!important;
  border-radius:22px!important;box-shadow:var(--ks-shadow)!important;
}
.login-card .form-control{background:#080E1D!important;border-color:var(--ks-line)!important}
.login-card .input-group-text{background:#111A2D!important;border-color:var(--ks-line)!important}
.btn-submit-sipak{background:var(--ks-purple)!important;border-color:var(--ks-purple)!important;border-radius:11px!important}
.btn-submit-sipak:hover{background:var(--ks-purple-hover)!important;border-color:var(--ks-purple-hover)!important}

@media(max-width:991px){
  .main-content{padding:0 20px 24px!important}
  .sikesa-pagebar{margin:0 -20px 24px!important;padding-left:20px!important;padding-right:20px!important}
}
@media(max-width:767px){
  #sidebar{width:min(88vw,280px)!important;min-width:0!important;padding:14px 15px!important}
  .mobile-menu-toggle{display:flex;top:10px;left:10px;background:var(--ks-purple)!important;border-color:var(--ks-purple)!important;border-radius:10px!important}
  .sidebar-overlay{background:rgba(0,0,0,.64)!important;backdrop-filter:blur(2px)}
  .main-content{padding:61px 14px 22px!important}
  .sikesa-pagebar{min-height:58px!important;margin:-61px -14px 20px!important;padding:9px 14px!important}
  .sikesa-pagebar-left{margin-left:44px!important}
  .sikesa-pagebar-icon{display:none!important}
  .sikesa-pagebar-title{font-size:.90rem!important}
  .card{border-radius:13px!important}
  .card-body{padding:16px!important}
  .table>:not(caption)>*>*{padding:11px 12px!important}
}

@media print{
  html,body,body.bg-light{background:#fff!important;color:#111!important}
  .main-content,main.main-content,main.bg-light,.bg-light{background:#fff!important;color:#111!important}
  .card,.table tbody tr{background:#fff!important;color:#111!important;border-color:#bbb!important}
  .table>:not(caption)>*>*,.table tbody td,.table tbody td strong{color:#111!important;background:#fff!important;border-color:#ccc!important}
  .table thead th{color:#111!important;background:#eee!important}
}