body { background-color: #f5f7fa; }
.card { border: none; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.badge-pending  { background-color: #ffc107; color:#222; }
.badge-approved { background-color: #198754; }
.badge-rejected { background-color: #dc3545; }
.badge-cancelled{ background-color: #6c757d; }
.table thead th { background-color: #eef2f7; }
.space-icon { font-size: 1.8rem; }

/* ============ Penyesuaian tampilan smartphone / layar kecil ============ */
@media (max-width: 767.98px) {
  body { font-size: 0.95rem; }

  .container { padding-left: 12px; padding-right: 12px; }

  /* Judul halaman tidak terlalu besar di layar kecil */
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.2rem; }
  h4 { font-size: 1.05rem; }
  h5 { font-size: 1rem; }

  /* Kartu lebih rapat di HP */
  .card-body { padding: 1rem; }

  /* Tombol menu di header jadi full-width & mudah ditap */
  #quickMenu .btn { width: 100%; text-align: left; padding-top: 0.55rem; padding-bottom: 0.55rem; }

  /* Tabel: perkecil font & padding agar muat, tetap bisa discroll horizontal */
  .table { font-size: 0.82rem; }
  .table td, .table th { padding: 0.5rem 0.4rem; white-space: nowrap; }
  .table td.wrap-cell, .table th.wrap-cell { white-space: normal; }

  /* Form: input & select tetap nyaman disentuh */
  .form-control, .form-select { font-size: 0.95rem; }
  .btn { min-height: 38px; }

  /* Logo + nama sekolah tidak overflow di layar sempit */
  .school-brand-name { font-size: 1rem; }

  /* Alert & card spacing lebih rapat */
  .alert { padding: 0.65rem 0.9rem; font-size: 0.9rem; }
}

@media (max-width: 400px) {
  .space-icon { font-size: 1.4rem; }
}