/* schooloka.css — Tema utama Schooloka */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --sk-blue:    #1A56DB;
  --sk-blue2:   #1040A8;
  --sk-bll:     #EBF2FF;
  --sk-orange:  #F97316;
  --sk-orl:     #FFF7ED;
  --sk-green:   #16A34A;
  --sk-grl:     #F0FDF4;
  --sk-purple:  #7C3AED;
  --sk-bg:      #F8FAFC;
  --sk-border:  #E2E8F0;
  --sk-text:    #0F172A;
  --sk-muted:   #64748B;
}

* { box-sizing: border-box; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--sk-bg);
  color: var(--sk-text);
  font-size: 14px;
}

/* ── NAVBAR ── */
.sk-navbar { background: var(--sk-blue) !important; padding: 0 0; height: 52px; }
.sk-logo { color: #fff !important; font-size: 20px; font-weight: 800; }
.sk-logo i { color: #FCD34D; }
.sk-navlink { color: rgba(255,255,255,.8) !important; font-size: 13px; font-weight: 500; border-radius: 6px; padding: 5px 10px; }
.sk-navlink:hover { background: rgba(255,255,255,.15); color: #fff !important; }
.sk-btn-outline { color: #fff; border: 1px solid rgba(255,255,255,.4); font-size: 12px; font-weight: 600; border-radius: 6px; }
.sk-btn-outline:hover { background: rgba(255,255,255,.15); color: #fff; }
.sk-btn-orange { background: var(--sk-orange); color: #fff; border: none; font-size: 12px; font-weight: 700; border-radius: 6px; }
.sk-btn-orange:hover { background: #EA6A00; color: #fff; }

/* ── HERO ── */
.sk-hero { background: linear-gradient(135deg, var(--sk-blue) 0%, var(--sk-blue2) 70%); padding: 40px 0 0; }
.sk-hero h1 { color: #fff; font-size: 28px; font-weight: 800; line-height: 1.3; }
.sk-hero .sub { color: rgba(255,255,255,.75); font-size: 14px; }

/* ── SEARCH BOX ── */
.sk-search-box { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 8px 40px rgba(0,0,0,.15); }
.sk-search-tab { padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; background: transparent; color: var(--sk-muted); }
.sk-search-tab.active { background: var(--sk-bll); color: var(--sk-blue); }
.sk-search-box .form-control, .sk-search-box .form-select {
  border: 1.5px solid var(--sk-border); border-radius: 8px; font-size: 13px; height: 40px;
}
.sk-search-box .form-control:focus, .sk-search-box .form-select:focus {
  border-color: var(--sk-blue); box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}

/* ── STATS BAR ── */
.sk-stat-bar { background: rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.15); margin-top: 28px; }
.sk-stat-item { padding: 16px; text-align: center; border-right: 1px solid rgba(255,255,255,.12); }
.sk-stat-item:last-child { border-right: none; }
.sk-stat-num { color: #fff; font-size: 22px; font-weight: 800; }
.sk-stat-lbl { color: rgba(255,255,255,.6); font-size: 11px; margin-top: 2px; }

/* ── CARDS ── */
.sk-card { background: #fff; border: 1px solid var(--sk-border); border-radius: 12px; overflow: hidden; transition: transform .15s, box-shadow .15s; cursor: pointer; }
.sk-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.sk-card-img { height: 110px; display: flex; align-items: center; justify-content: center; font-size: 36px; }
.sk-card-img.bg-blue   { background: linear-gradient(135deg,#DBEAFE,#93C5FD); }
.sk-card-img.bg-green  { background: linear-gradient(135deg,#DCFCE7,#86EFAC); }
.sk-card-img.bg-purple { background: linear-gradient(135deg,#EDE9FE,#C4B5FD); }
.sk-card-img.bg-orange { background: linear-gradient(135deg,#FEF3C7,#FCD34D); }
.sk-card-img.bg-teal   { background: linear-gradient(135deg,#CCFBF1,#5EEAD4); }

/* ── BADGE ── */
.sk-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.sk-badge-green  { background: var(--sk-grl); color: #166534; }
.sk-badge-blue   { background: var(--sk-bll); color: #1e40af; }
.sk-badge-orange { background: var(--sk-orl); color: #9a3412; }
.sk-badge-yellow { background: #FFFBEB;       color: #78350F; }
.sk-badge-red    { background: #FEF2F2;       color: #7f1d1d; }
.sk-badge-purple { background: #F5F3FF;       color: #4c1d95; }

/* ── DASHBOARD SIDEBAR ── */
.sk-sidebar { width: 210px; min-height: calc(100vh - 52px); background: #fff; border-right: 1px solid var(--sk-border); }
.sk-sidebar .nav-link { font-size: 13px; font-weight: 500; color: var(--sk-muted); border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.sk-sidebar .nav-link:hover { background: var(--sk-bg); color: var(--sk-text); }
.sk-sidebar .nav-link.active { background: var(--sk-bll); color: var(--sk-blue); font-weight: 700; }
.sk-sidebar-label { font-size: 10px; font-weight: 700; color: var(--sk-muted); text-transform: uppercase; letter-spacing: .06em; padding: 10px 10px 4px; }

/* ── STAT CARDS ── */
.sk-stat-card { background: #fff; border: 1px solid var(--sk-border); border-radius: 10px; padding: 16px; }
.sk-stat-card .ico { font-size: 24px; margin-bottom: 6px; }
.sk-stat-card .num { font-size: 26px; font-weight: 800; }
.sk-stat-card .lbl { font-size: 11px; color: var(--sk-muted); margin-top: 2px; }
.sk-stat-card .chg { font-size: 11px; margin-top: 4px; }

/* ── TIMELINE ── */
.sk-timeline { position: relative; padding-left: 28px; }
.sk-tl-item  { position: relative; margin-bottom: 16px; }
.sk-tl-dot   { position: absolute; left: -28px; top: 2px; width: 14px; height: 14px; border-radius: 50%; }
.sk-tl-dot.done   { background: var(--sk-green); }
.sk-tl-dot.active { background: var(--sk-orange); }
.sk-tl-dot.wait   { background: var(--sk-border); border: 2px solid var(--sk-border); }
.sk-tl-line       { position: absolute; left: -22px; top: 16px; width: 2px; height: 100%; background: var(--sk-border); }

/* ── FORM ── */
.sk-form-label { font-size: 11px; font-weight: 700; color: var(--sk-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.sk-input { border: 1.5px solid var(--sk-border); border-radius: 8px; padding: 9px 12px; font-size: 13px; font-family: inherit; }
.sk-input:focus { border-color: var(--sk-blue); box-shadow: 0 0 0 3px rgba(26,86,219,.1); outline: none; }

/* ── CHAT ── */
.sk-chat-area { height: 320px; overflow-y: auto; background: var(--sk-bg); border-radius: 10px; border: 1px solid var(--sk-border); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.sk-bubble-in  { background: #fff; border: 1px solid var(--sk-border); border-bottom-left-radius: 3px; }
.sk-bubble-out { background: var(--sk-blue); color: #fff; border-bottom-right-radius: 3px; }
.sk-bubble     { padding: 8px 12px; border-radius: 12px; max-width: 75%; font-size: 13px; line-height: 1.5; }

/* ── INVOICE ── */
.sk-invoice-header { background: var(--sk-blue); color: #fff; padding: 20px; border-radius: 10px 10px 0 0; }
.sk-invoice-body   { border: 1px solid var(--sk-border); border-top: none; border-radius: 0 0 10px 10px; }

/* ── BUTTONS ── */
.sk-btn-primary { background: var(--sk-blue);   color: #fff; border: none; padding: 9px 20px; border-radius: 8px; font-weight: 700; font-family: inherit; cursor: pointer; font-size: 13px; }
.sk-btn-primary:hover { background: var(--sk-blue2); }
.sk-btn-success { background: var(--sk-green);  color: #fff; border: none; padding: 9px 20px; border-radius: 8px; font-weight: 700; font-family: inherit; cursor: pointer; font-size: 13px; }
.sk-btn-warning { background: var(--sk-orange); color: #fff; border: none; padding: 9px 20px; border-radius: 8px; font-weight: 700; font-family: inherit; cursor: pointer; font-size: 13px; }
.sk-btn-outline-primary { background: transparent; color: var(--sk-blue); border: 1.5px solid var(--sk-blue); padding: 8px 18px; border-radius: 8px; font-weight: 600; font-family: inherit; cursor: pointer; font-size: 13px; }

/* ── PROGRESS BAR ── */
.sk-prog { height: 8px; background: var(--sk-border); border-radius: 4px; overflow: hidden; }
.sk-prog-fill { height: 100%; border-radius: 4px; transition: width .5s; }

/* ── TABLE ── */
.sk-table thead th { font-size: 11px; font-weight: 700; color: var(--sk-muted); background: var(--sk-bg); text-transform: uppercase; border-bottom: 1px solid var(--sk-border); padding: 9px 12px; }
.sk-table tbody td { font-size: 12px; padding: 9px 12px; vertical-align: middle; border-bottom: 1px solid var(--sk-border); }
.sk-table tbody tr:last-child td { border-bottom: none; }
.sk-table tbody tr:hover td { background: #FAFBFC; }

/* ── PAGE LOADER ── */
.sk-loading { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .sk-hero h1 { font-size: 20px; }
  .sk-sidebar  { display: none; }
  .sk-stat-item { padding: 10px 8px; }
  .sk-stat-num  { font-size: 16px; }
}

/* ── KALENDER ── */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-day { text-align:center; padding:7px 2px; border-radius:6px; font-size:12px; cursor:pointer; min-height:34px; }
.cal-day.hdr { font-weight:700; font-size:11px; color:var(--sk-muted); cursor:default; }
.cal-day:hover:not(.hdr):not(.empty) { background:var(--sk-bll); }
.cal-day.today { background:var(--sk-blue); color:#fff; font-weight:700; }
.cal-day.empty { cursor:default; }

/* ── CHAT ── */
.sk-sidebar .nav-link.active { background:var(--sk-bll); color:var(--sk-blue); font-weight:700; }

/* ── UPLOAD DRAG ── */
.upload-drop { border:2px dashed var(--sk-border); border-radius:10px; padding:24px; text-align:center; cursor:pointer; transition:border-color .2s; }
.upload-drop:hover { border-color:var(--sk-blue); background:var(--sk-bll); }

/* ── SUPERADMIN ── */
.sa-tenant-card { border-left:3px solid var(--sk-blue); }

/* ── RESPONSIVE FIXES ── */
@media (max-width:576px) {
  .sk-stat-bar .sk-stat-num { font-size:16px; }
  .sk-hero h1 { font-size:20px; }
  .sk-search-box .row > div { margin-bottom:6px; }
  .sk-stat-item { padding:10px 6px; }
}

/* ── DARK MODE SIDEBAR ── */
@media (prefers-color-scheme:dark) {
  .sk-sidebar { background:#1e293b; border-color:#334155; }
  .sk-sidebar .nav-link { color:#94a3b8; }
  .sk-sidebar .nav-link:hover { background:#334155; color:#e2e8f0; }
  .sk-sidebar .nav-link.active { background:#1e3a8a; color:#93c5fd; }
}

/* ══════════════════════════════════════════════════
   MOBILE NAVBAR FIX
   Masalah: menu collapse menimpa konten halaman
   karena navbar sticky-top + z-index konflik
   ══════════════════════════════════════════════════ */

/* Navbar harus di atas segalanya */
.sk-navbar { z-index: 1040 !important; }

/* Collapse menu mobile - tampil sebagai dropdown solid */
@media (max-width: 991.98px) {
  .sk-navbar .navbar-collapse {
    position: absolute;
    top: 52px;              /* tepat di bawah navbar */
    left: 0;
    right: 0;
    background: #1040A8;   /* sk-blue2 */
    border-top: 1px solid rgba(255,255,255,.15);
    border-bottom: 3px solid rgba(255,255,255,.1);
    padding: 10px 16px 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    z-index: 1039;
    max-height: calc(100vh - 52px);
    overflow-y: auto;
  }

  /* Nav links di mobile jadi list vertikal */
  .sk-navbar .navbar-nav {
    flex-direction: column !important;
    gap: 2px !important;
    align-items: flex-start !important;
    width: 100%;
  }

  .sk-navbar .navbar-nav.ms-auto {
    margin-left: 0 !important;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.15);
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 6px !important;
  }

  .sk-navlink {
    display: block;
    width: 100%;
    padding: 9px 12px !important;
    border-radius: 8px !important;
  }

  /* Tombol Masuk & Daftar di mobile */
  .sk-navbar .navbar-nav.ms-auto .nav-item {
    flex: 0 0 auto;
  }

  /* Dropdown user di mobile - tampil inline bukan floating */
  .sk-navbar .dropdown-menu {
    position: static !important;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    margin-top: 4px;
    box-shadow: none;
  }
  .sk-navbar .dropdown-menu .dropdown-item {
    color: rgba(255,255,255,.85);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
  }
  .sk-navbar .dropdown-menu .dropdown-item:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
  }
  .sk-navbar .dropdown-menu hr.dropdown-divider {
    border-color: rgba(255,255,255,.2);
  }
  .sk-navbar .dropdown-menu .text-danger {
    color: #fca5a5 !important;
  }
}

/* ══════════════════════════════════════════════════
   FILTER SIDEBAR - PILL TOGGLE STYLE
   ══════════════════════════════════════════════════ */

.filter-pill input:checked + span {
  background: #1A56DB !important;
  color: #fff !important;
  border-color: #1A56DB !important;
}
.filter-pill span {
  transition: all .15s;
  border: 1.5px solid #dee2e6;
  color: #64748B;
}
.filter-pill:hover span {
  border-color: #1A56DB;
  color: #1A56DB;
}

/* Active filter pills di hasil pencarian */
#active-filters .badge {
  transition: opacity .15s;
}
#active-filters .badge:hover {
  opacity: .8;
}

/* ══════════════════════════════════════════════════
   MOBILE RESPONSIVE - HALAMAN CARI
   ══════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  /* Card sekolah full width di mobile */
  .sk-card { margin-bottom: 0; }

  /* Filter collapse di mobile */
  #filterCollapse { margin-bottom: 12px; }

  /* Search bar top di mobile - stack vertikal */
  .sk-search-box .row > div { margin-bottom: 6px; }

  /* Stat bar - font lebih kecil */
  .sk-stat-num { font-size: 18px !important; }
  .sk-stat-lbl { font-size: 10px !important; }

  /* Hasil pagination center */
  #hasil-pagination { justify-content: center; }
}

/* ══════════════════════════════════════════════════
   GENERAL MOBILE IMPROVEMENTS
   ══════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
  /* Container padding lebih kecil di HP */
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }

  /* Hero text lebih kecil */
  .sk-hero h1 { font-size: 18px !important; line-height: 1.3; }
  .sk-hero .sub { font-size: 12px !important; }

  /* Tombol search full width */
  .sk-search-box .btn-search { width: 100%; }

  /* Sidebar desktop tetap hidden di mobile — offcanvas menggantikannya */
  /* d-none d-md-block di HTML sudah menangani ini, tidak perlu !important di sini */

  /* Table scroll horizontal */
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* Chat area lebih pendek di mobile */
  .sk-chat-area { height: 240px !important; }

  /* Modal/Swal lebih fit di mobile */
  .swal2-popup { width: 92vw !important; }
}

/* ══════════════════════════════════════════════════
   CARD SEKOLAH - FOTO STYLE
   ══════════════════════════════════════════════════ */

.sk-card-foto img {
  transition: transform .4s ease;
}
.sk-card:hover .sk-card-foto img {
  transform: scale(1.05);
}
.sk-card-img-fallback {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shimmer loading placeholder saat foto masih loading */
.sk-card-foto {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.sk-card-foto img[src] {
  animation: none;
  background: none;
}
@keyframes sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════
   MOBILE SIDEBAR (OFFCANVAS)
   ══════════════════════════════════════════════════ */

/* Offcanvas sidebar mobile — konten sama dengan desktop sidebar */
#sk-sidebar-offcanvas .nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--sk-muted);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
#sk-sidebar-offcanvas .nav-link:hover {
  background: var(--sk-bg);
  color: var(--sk-text);
}
#sk-sidebar-offcanvas .nav-link.active {
  background: var(--sk-bll);
  color: var(--sk-blue);
  font-weight: 700;
}
#sk-sidebar-offcanvas .offcanvas-body {
  padding: 8px !important;
}

/* Tombol hamburger ☰ di header halaman — hanya tampil di mobile */
.sk-mobile-menu-btn {
  display: none;
}
@media (max-width: 767.98px) {
  .sk-mobile-menu-btn {
    display: inline-flex !important;
  }
}

/* Dark mode offcanvas */
[data-bs-theme="dark"] #sk-sidebar-offcanvas,
.dark-mode #sk-sidebar-offcanvas {
  background: #1e293b;
}
[data-bs-theme="dark"] #sk-sidebar-offcanvas .nav-link,
.dark-mode #sk-sidebar-offcanvas .nav-link {
  color: #94a3b8;
}
[data-bs-theme="dark"] #sk-sidebar-offcanvas .nav-link:hover,
.dark-mode #sk-sidebar-offcanvas .nav-link:hover {
  background: #334155;
  color: #e2e8f0;
}
[data-bs-theme="dark"] #sk-sidebar-offcanvas .nav-link.active,
.dark-mode #sk-sidebar-offcanvas .nav-link.active {
  background: #1e3a8a;
  color: #93c5fd;
}