/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard Sekolah Model — Custom Theme
   Referensi: tampilan.png (dark navy #1C2D45, teal accent #00BCD4)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --navy:     #1C2D45;
  --navy-mid: #243650;
  --navy-lt:  #2E4A68;
  --teal:     #00BCD4;
  --teal-dk:  #0097A7;
  --green:    #26A69A;
  --text-sidebar: #CFD8E3;
  --text-active:  #00E5FF;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html { font-size: 106%; } /* scale semua rem-based font +1 size */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  background-color: #F0F2F5;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.skin-blue .main-header .navbar,
.skin-blue .main-header .logo {
  background-color: var(--navy) !important;
  border-bottom: none;
}
.skin-blue .main-header .logo {
  font-size: 1rem;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: .3px;
  border-right: 1px solid var(--navy-lt);
}
.skin-blue .main-header .logo:hover { background-color: var(--navy-mid) !important; }
.skin-blue .main-header .navbar .sidebar-toggle {
  color: var(--text-sidebar) !important;
}
.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: var(--navy-mid) !important;
}
.main-header .navbar { min-height: 54px; }
.main-header .logo   { height: 54px; line-height: 54px; }
.header-info { line-height: 54px !important; padding: 0 16px !important; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background-color: var(--navy) !important;
}
.sidebar-section-title {
  color: #7A97B5;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 14px 16px 4px;
  margin: 0;
  text-transform: uppercase;
}
.sidebar-hr {
  border-color: var(--navy-lt);
  margin: 8px 16px;
}
.sidebar-filters { padding-top: 8px; }
.sidebar-filters label {
  color: var(--text-sidebar);
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.sidebar-filters .form-control,
.sidebar-filters select {
  background-color: var(--navy-mid) !important;
  color: #e0e8f0 !important;
  border: 1px solid var(--navy-lt) !important;
  border-radius: 5px;
  font-size: .8rem;
  height: 32px;
  padding: 4px 8px;
}
.sidebar-filters .form-control:focus { border-color: var(--teal) !important; }

/* ── Sidebar Menu ─────────────────────────────────────────────────────────── */
.skin-blue .sidebar-menu > li > a {
  color: var(--text-sidebar) !important;
  font-size: .85rem;
  border-left: 3px solid transparent;
  padding: 10px 16px 10px 18px;
  transition: all .15s;
}
.skin-blue .sidebar-menu > li > a:hover {
  color: #fff !important;
  background-color: var(--navy-mid) !important;
  border-left-color: var(--teal) !important;
}
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.active > a:hover {
  color: var(--text-active) !important;
  background-color: rgba(0,188,212,.18) !important;
  border-left-color: var(--teal) !important;
  font-weight: 600;
}
.skin-blue .sidebar-menu > li > a > .fa {
  width: 22px;
  color: inherit;
  margin-right: 8px;
}

/* ── Content Wrapper ─────────────────────────────────────────────────────── */
.skin-blue .wrapper { background-color: #F0F2F5; }
.content-wrapper    { background-color: #F0F2F5 !important; padding: 16px; }
.content-header     { padding: 8px 16px 4px; }
.content-header h1  { font-size: 1.1rem; font-weight: 700; color: var(--navy); }

/* ── ValueBox ────────────────────────────────────────────────────────────── */
.small-box {
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
  min-height: 90px;
}
.small-box h3 {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  margin-bottom: 2px;
}
.small-box p  { font-size: .82rem !important; font-weight: 600; }
.small-box .icon { font-size: 3.5rem !important; top: 12px !important; }
.small-box:hover { transform: translateY(-2px); transition: transform .2s; }

/* ValueBox color overrides */
.bg-teal,   .small-box.bg-teal   { background-color: #00BCD4 !important; }
.bg-green,  .small-box.bg-green  { background-color: #26A69A !important; }
.bg-navy,   .small-box.bg-navy   { background-color: #1C2D45 !important; }
.bg-orange, .small-box.bg-orange { background-color: #FF7043 !important; }
.bg-purple, .small-box.bg-purple { background-color: #7E57C2 !important; }

/* ── Box ─────────────────────────────────────────────────────────────────── */
.box {
  border-radius: 8px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.08) !important;
  border-top: none !important;
  margin-bottom: 16px;
}
.box-header {
  background-color: var(--navy) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 10px 16px !important;
}
.box-header .box-title {
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: .2px;
}
.box-header .box-tools .btn { color: #cdd7e0 !important; }
.box-body { padding: 14px 16px !important; }

/* ── DataTable ───────────────────────────────────────────────────────────── */
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: .82rem;
}
table.dataTable thead th {
  background-color: var(--navy) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: .8rem !important;
  padding: 10px 12px !important;
  border: none !important;
  white-space: nowrap;
}
table.dataTable thead th:first-child { border-radius: 0; }
table.dataTable tbody tr {
  background-color: #fff;
  transition: background .1s;
}
table.dataTable tbody tr:hover td { background-color: #EBF5FB !important; }
table.dataTable tbody td {
  padding: 8px 12px !important;
  border-bottom: 1px solid #EEF1F5 !important;
  vertical-align: middle !important;
  color: #2C3E50;
}
table.dataTable tbody tr:last-child td { border-bottom: none !important; }

/* DT buttons row */
.dt-buttons { margin-bottom: 8px; }
.dt-button {
  background-color: #fff !important;
  border: 1px solid #D0D7E2 !important;
  color: var(--navy) !important;
  border-radius: 5px !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  margin-right: 4px !important;
  transition: all .15s;
}
.dt-button:hover {
  background-color: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
}
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #D0D7E2;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: .8rem;
  color: var(--navy);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: .8rem; color: #6c757d; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
  border-radius: 4px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #EBF5FB !important;
  color: var(--navy) !important;
  border-color: #D0D7E2 !important;
  border-radius: 4px;
}

/* ── Action buttons inside table ─────────────────────────────────────────── */
.btn-aksi {
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  border: none;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.btn-detail  { background-color: #2E86C1; }
.btn-warning { background-color: #F39C12; }
.btn-danger  { background-color: #E74C3C; }

/* ── Profil card (Detail Sekolah) ────────────────────────────────────────── */
.profil-card {
  background: linear-gradient(135deg, var(--navy) 0%, #2E6DA4 100%);
  color: #fff;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 14px;
}
.profil-card .school-name { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; }
.profil-card .school-meta { font-size: .82rem; opacity: .85; line-height: 1.7; }
.profil-card .school-npsn { font-size: .72rem; font-family: monospace; opacity: .6; }
.profil-skor {
  text-align: right;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
}
.profil-tahap { font-size: .78rem; opacity: .8; text-align: right; margin-top: 4px; }

/* ── EWS priority rows ───────────────────────────────────────────────────── */
.ews-tinggi td { background-color: #FDEDEC !important; }
.ews-sedang td { background-color: #FEF9E7 !important; }

/* ── Leaflet popup ───────────────────────────────────────────────────────── */
.leaflet-popup-content { font-size: .83rem; min-width: 190px; }
.leaflet-popup-content b { color: var(--navy); }

/* ── ValueBox 5-kolom sama lebar ─────────────────────────────────────────── */
.vb-5col .col-sm-2 {
  width: 20% !important;
}

/* ── Responsive / Mobile ─────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Header: perkecil logo agar hamburger button tidak tertutup */
  .skin-blue .main-header .logo {
    width: 200px !important;
    font-size: .82rem !important;
  }
  .main-header .logo { height: 50px; line-height: 50px; }
  .main-header .navbar { min-height: 50px; }

  /* Sembunyikan info sekolah di header agar tidak sesak */
  .header-info { display: none !important; }

  /* ValueBox: 1 box per baris di HP */
  .vb-5col .col-sm-2 {
    width: 100% !important;
    float: none;
  }

  /* Box body padding lebih kecil */
  .box-body { padding: 10px 10px !important; }
  .content-wrapper { padding: 10px !important; }

  /* Profil card font lebih kecil */
  .profil-card .school-name { font-size: .95rem; }
  .profil-skor { font-size: 1.8rem; }

  /* Login card full width di HP */
  .login-card {
    width: 95vw !important;
    padding: 24px 18px 20px !important;
  }
}

/* ── Login overlay (menutupi dashboard di belakangnya) ───────────────────── */
#login_overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 9999;
}

/* Sembunyikan header & sidebar saat mode login */
body.login-mode .main-header,
body.login-mode .main-sidebar,
body.login-mode .control-sidebar {
  display: none !important;
}
/* Hilangkan margin-left content-wrapper (efek sidebar tersembunyi) */
body.login-mode .content-wrapper {
  margin-left: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ── Login Page ──────────────────────────────────────────────────────────── */
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--navy) 0%, #2E6DA4 100%);
}
.login-card {
  background: #fff;
  border-radius: 14px;
  padding: 36px 40px 28px;
  width: 400px;
  box-shadow: 0 12px 40px rgba(0,0,0,.30);
}
.login-logo {
  text-align: center;
  margin-bottom: 4px;
}
.login-logo h3 {
  color: var(--navy);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 10px 0 2px;
}
.login-subtitle {
  font-size: .8rem;
  color: #6c757d;
  margin: 0;
}
.login-body .form-control {
  border-radius: 6px;
  font-size: .88rem;
  height: 38px;
  border: 1px solid #D0D7E2;
}
.login-body .form-control:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(0,188,212,.15);
}
.btn-login {
  background-color: var(--navy) !important;
  border-color:     var(--navy) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  height: 40px;
  font-size: .9rem !important;
  transition: background .2s;
}
.btn-login:hover {
  background-color: var(--navy-lt) !important;
  border-color:     var(--navy-lt) !important;
}
.login-footer {
  text-align: center;
  font-size: .76rem;
  color: #9aabb8;
  margin-top: 18px;
  margin-bottom: 0;
}
.login-error {
  background: #FDEDEC;
  border: 1px solid #E74C3C;
  color: #E74C3C;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: .82rem;
  margin-top: 12px;
}

/* ── Header logout button ────────────────────────────────────────────────── */
.header-user-info {
  color: #cdd7e0;
  font-size: .82rem;
  padding: 0 16px;
  line-height: 54px;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F0F2F5; }
::-webkit-scrollbar-thumb { background: #BDC3CB; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--navy-lt); }