/*
 * LMS MINU — Mobile Compact UI
 * Fokus: layar <= 767px. Desktop tidak diubah.
 * Dibuat untuk mengurangi kartu/tombol terlalu besar dan menjaga hirarki visual.
 */
@media (max-width: 767px) {
  html { font-size: 15px; }
  body.compact-mobile-ui {
    background: #f6f8fb !important;
    color: #0f172a;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }

  body.compact-mobile-ui main,
  body.compact-mobile-ui .app-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px 10px 82px !important;
    overflow-x: hidden !important;
  }

  body.compact-mobile-ui main > *,
  body.compact-mobile-ui .app-main > * { min-width: 0; max-width: 100%; }

  /* Tipografi: cukup tegas, tidak memenuhi layar. */
  body.compact-mobile-ui main h1,
  body.compact-mobile-ui .app-main h1 {
    font-size: 1.45rem !important;
    line-height: 1.18 !important;
    letter-spacing: -.025em !important;
  }
  body.compact-mobile-ui main h2,
  body.compact-mobile-ui .app-main h2 {
    font-size: 1.18rem !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em !important;
  }
  body.compact-mobile-ui main h3,
  body.compact-mobile-ui .app-main h3 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
  body.compact-mobile-ui main .text-6xl,
  body.compact-mobile-ui main .text-5xl,
  body.compact-mobile-ui main .text-4xl,
  body.compact-mobile-ui .app-main .text-6xl,
  body.compact-mobile-ui .app-main .text-5xl,
  body.compact-mobile-ui .app-main .text-4xl { font-size: 1.55rem !important; line-height: 1.75rem !important; }
  body.compact-mobile-ui main .text-3xl,
  body.compact-mobile-ui .app-main .text-3xl { font-size: 1.28rem !important; line-height: 1.5rem !important; }
  body.compact-mobile-ui main .text-2xl,
  body.compact-mobile-ui .app-main .text-2xl { font-size: 1.08rem !important; line-height: 1.35rem !important; }

  /* Spasi vertikal yang sebelumnya terlalu longgar. */
  body.compact-mobile-ui main .space-y-8 > :not([hidden]) ~ :not([hidden]),
  body.compact-mobile-ui .app-main .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 12px !important; }
  body.compact-mobile-ui main .space-y-6 > :not([hidden]) ~ :not([hidden]),
  body.compact-mobile-ui .app-main .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 10px !important; }
  body.compact-mobile-ui main .space-y-5 > :not([hidden]) ~ :not([hidden]),
  body.compact-mobile-ui main .space-y-4 > :not([hidden]) ~ :not([hidden]),
  body.compact-mobile-ui .app-main .space-y-5 > :not([hidden]) ~ :not([hidden]),
  body.compact-mobile-ui .app-main .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 8px !important; }
  body.compact-mobile-ui main .gap-8, body.compact-mobile-ui .app-main .gap-8,
  body.compact-mobile-ui main .gap-6, body.compact-mobile-ui .app-main .gap-6 { gap: 10px !important; }
  body.compact-mobile-ui main .gap-5, body.compact-mobile-ui .app-main .gap-5,
  body.compact-mobile-ui main .gap-4, body.compact-mobile-ui .app-main .gap-4,
  body.compact-mobile-ui main .gap-3, body.compact-mobile-ui .app-main .gap-3 { gap: 8px !important; }
  body.compact-mobile-ui main .mt-8, body.compact-mobile-ui .app-main .mt-8,
  body.compact-mobile-ui main .mt-6, body.compact-mobile-ui .app-main .mt-6 { margin-top: 12px !important; }
  body.compact-mobile-ui main .mt-5, body.compact-mobile-ui .app-main .mt-5,
  body.compact-mobile-ui main .mt-4, body.compact-mobile-ui .app-main .mt-4 { margin-top: 8px !important; }
  body.compact-mobile-ui main .mb-8, body.compact-mobile-ui .app-main .mb-8,
  body.compact-mobile-ui main .mb-6, body.compact-mobile-ui .app-main .mb-6,
  body.compact-mobile-ui main .mb-5, body.compact-mobile-ui .app-main .mb-5 { margin-bottom: 10px !important; }

  /* Kartu/panel: radius lebih kecil, shadow tipis, padding hemat. */
  body.compact-mobile-ui main section[class*="rounded"],
  body.compact-mobile-ui main article[class*="rounded"],
  body.compact-mobile-ui .app-main section[class*="rounded"],
  body.compact-mobile-ui .app-main article[class*="rounded"] {
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .045) !important;
  }
  body.compact-mobile-ui main section[class*="p-8"],
  body.compact-mobile-ui main section[class*="p-7"],
  body.compact-mobile-ui main section[class*="p-6"],
  body.compact-mobile-ui main section[class*="p-5"],
  body.compact-mobile-ui main article[class*="p-8"],
  body.compact-mobile-ui main article[class*="p-7"],
  body.compact-mobile-ui main article[class*="p-6"],
  body.compact-mobile-ui main article[class*="p-5"],
  body.compact-mobile-ui main article[class*="p-4"],
  body.compact-mobile-ui .app-main section[class*="p-8"],
  body.compact-mobile-ui .app-main section[class*="p-7"],
  body.compact-mobile-ui .app-main section[class*="p-6"],
  body.compact-mobile-ui .app-main section[class*="p-5"],
  body.compact-mobile-ui .app-main article[class*="p-8"],
  body.compact-mobile-ui .app-main article[class*="p-7"],
  body.compact-mobile-ui .app-main article[class*="p-6"],
  body.compact-mobile-ui .app-main article[class*="p-5"],
  body.compact-mobile-ui .app-main article[class*="p-4"] { padding: 11px !important; }

  body.compact-mobile-ui main .rounded-3xl,
  body.compact-mobile-ui main .rounded-2xl,
  body.compact-mobile-ui .app-main .rounded-3xl,
  body.compact-mobile-ui .app-main .rounded-2xl { border-radius: 11px !important; }

  /* Hero/banner besar dijadikan panel ringkas. */
  body.compact-mobile-ui main > section[class*="bg-gradient-to-"],
  body.compact-mobile-ui main > div > section[class*="bg-gradient-to-"],
  body.compact-mobile-ui .app-main > section[class*="bg-gradient-to-"],
  body.compact-mobile-ui .app-main > div > section[class*="bg-gradient-to-"] {
    background: #fff !important;
    background-image: none !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    padding: 12px !important;
  }
  body.compact-mobile-ui main > section[class*="bg-gradient-to-"] > .absolute,
  body.compact-mobile-ui main > div > section[class*="bg-gradient-to-"] > .absolute,
  body.compact-mobile-ui .app-main > section[class*="bg-gradient-to-"] > .absolute,
  body.compact-mobile-ui .app-main > div > section[class*="bg-gradient-to-"] > .absolute { display: none !important; }
  body.compact-mobile-ui main > section[class*="bg-gradient-to-"] [class*="text-white"],
  body.compact-mobile-ui main > div > section[class*="bg-gradient-to-"] [class*="text-white"],
  body.compact-mobile-ui main > section[class*="bg-gradient-to-"] [class*="text-slate-300"],
  body.compact-mobile-ui main > div > section[class*="bg-gradient-to-"] [class*="text-slate-300"],
  body.compact-mobile-ui .app-main > section[class*="bg-gradient-to-"] [class*="text-white"],
  body.compact-mobile-ui .app-main > div > section[class*="bg-gradient-to-"] [class*="text-white"],
  body.compact-mobile-ui .app-main > section[class*="bg-gradient-to-"] [class*="text-slate-300"],
  body.compact-mobile-ui .app-main > div > section[class*="bg-gradient-to-"] [class*="text-slate-300"] { color: #334155 !important; }
  body.compact-mobile-ui main > section[class*="bg-gradient-to-"] p,
  body.compact-mobile-ui main > div > section[class*="bg-gradient-to-"] p,
  body.compact-mobile-ui .app-main > section[class*="bg-gradient-to-"] p,
  body.compact-mobile-ui .app-main > div > section[class*="bg-gradient-to-"] p {
    color: #64748b !important;
    line-height: 1.45 !important;
    margin-top: 6px !important;
  }

  /* Input/form: masih nyaman disentuh, tapi tidak terlalu tinggi. */
  body.compact-mobile-ui main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  body.compact-mobile-ui main select,
  body.compact-mobile-ui main textarea,
  body.compact-mobile-ui .app-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  body.compact-mobile-ui .app-main select,
  body.compact-mobile-ui .app-main textarea {
    min-height: 39px !important;
    height: auto;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  body.compact-mobile-ui main textarea,
  body.compact-mobile-ui .app-main textarea { min-height: 84px !important; }
  body.compact-mobile-ui main label,
  body.compact-mobile-ui .app-main label { font-size: 12px !important; }

  /* Tombol di area konten: 36–40px, bukan 48–56px. */
  body.compact-mobile-ui main a[class*="h-14"], body.compact-mobile-ui main button[class*="h-14"],
  body.compact-mobile-ui main a[class*="h-12"], body.compact-mobile-ui main button[class*="h-12"],
  body.compact-mobile-ui main a[class*="h-11"], body.compact-mobile-ui main button[class*="h-11"],
  body.compact-mobile-ui main a[class*="h-10"], body.compact-mobile-ui main button[class*="h-10"],
  body.compact-mobile-ui .app-main a[class*="h-14"], body.compact-mobile-ui .app-main button[class*="h-14"],
  body.compact-mobile-ui .app-main a[class*="h-12"], body.compact-mobile-ui .app-main button[class*="h-12"],
  body.compact-mobile-ui .app-main a[class*="h-11"], body.compact-mobile-ui .app-main button[class*="h-11"],
  body.compact-mobile-ui .app-main a[class*="h-10"], body.compact-mobile-ui .app-main button[class*="h-10"] {
    height: 38px !important;
    min-height: 38px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    box-shadow: none !important;
  }

  /* Ikon kartu jangan lebih besar dari informasi utamanya. */
  body.compact-mobile-ui main .h-20.w-20, body.compact-mobile-ui .app-main .h-20.w-20,
  body.compact-mobile-ui main .h-16.w-16, body.compact-mobile-ui .app-main .h-16.w-16,
  body.compact-mobile-ui main .h-14.w-14, body.compact-mobile-ui .app-main .h-14.w-14 {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    font-size: 1.25rem !important;
  }

  /* Statistik: 3 angka dapat tampil sejajar agar tidak memanjang. */
  body.compact-mobile-ui main section.grid.grid-cols-1:has(> div:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  body.compact-mobile-ui main section.grid.grid-cols-1:has(> div:nth-child(3):last-child) > div {
    min-width: 0 !important;
    padding: 9px !important;
    text-align: center;
  }
  body.compact-mobile-ui main section.grid.grid-cols-1:has(> div:nth-child(3):last-child) > div > :first-child {
    font-size: 1.15rem !important;
  }
  body.compact-mobile-ui main section.grid.grid-cols-1:has(> div:nth-child(3):last-child) > div .text-3xl {
    margin-top: 5px !important;
    font-size: 1.25rem !important;
  }
  body.compact-mobile-ui main section.grid.grid-cols-1:has(> div:nth-child(3):last-child) > div .text-sm {
    font-size: .68rem !important;
    line-height: 1rem !important;
  }

  /* Card list: metadata rapat, aksi banyak berubah jadi grid 2 kolom. */
  body.compact-mobile-ui main article > .grid:has(> :nth-child(4)),
  body.compact-mobile-ui .app-main article > .grid:has(> :nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  body.compact-mobile-ui main article > .grid:has(> :nth-child(4)) > :first-child,
  body.compact-mobile-ui .app-main article > .grid:has(> :nth-child(4)) > :first-child { grid-column: 1 / -1; }
  body.compact-mobile-ui main article [class*="rounded-full"],
  body.compact-mobile-ui .app-main article [class*="rounded-full"] {
    padding: 4px 8px !important;
    font-size: 10px !important;
    line-height: 1rem !important;
  }

  /* Tabel: compact, scroll tetap tersedia bila memang diperlukan. */
  body.compact-mobile-ui main .overflow-x-auto,
  body.compact-mobile-ui .app-main .overflow-x-auto {
    border-radius: 11px !important;
    -webkit-overflow-scrolling: touch;
  }
  body.compact-mobile-ui main table,
  body.compact-mobile-ui .app-main table { font-size: 12px !important; }
  body.compact-mobile-ui main th, body.compact-mobile-ui main td,
  body.compact-mobile-ui .app-main th, body.compact-mobile-ui .app-main td {
    padding: 8px 9px !important;
  }

  /* Alert/info tidak perlu menjadi kartu besar. */
  body.compact-mobile-ui main > div[class*="bg-emerald-50"],
  body.compact-mobile-ui main > div[class*="bg-red-50"],
  body.compact-mobile-ui main > div[class*="bg-amber-50"],
  body.compact-mobile-ui .app-main > div[class*="bg-emerald-50"],
  body.compact-mobile-ui .app-main > div[class*="bg-red-50"],
  body.compact-mobile-ui .app-main > div[class*="bg-amber-50"] {
    padding: 9px 11px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    box-shadow: none !important;
  }

  /* Navigasi bawah: tetap mudah disentuh tetapi tidak menutup banyak isi. */
  body.compact-mobile-ui .app-bottom-footer { left: 7px !important; right: 7px !important; bottom: 7px !important; }
  body.compact-mobile-ui .app-footer-card { padding: 5px !important; border-radius: 16px !important; }
  body.compact-mobile-ui .app-bottom-nav-item { height: 45px !important; min-height: 45px !important; border-radius: 11px !important; gap: 2px !important; }
  body.compact-mobile-ui .app-bottom-nav-item svg { width: 18px !important; height: 18px !important; }
  body.compact-mobile-ui .app-bottom-nav-label { font-size: 9px !important; }

  /* Komponen tambahan untuk halaman yang dirapikan khusus. */
  .compact-page-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px !important;
    align-items: center !important;
  }
  .compact-more { position: relative; }
  .compact-more > summary {
    list-style: none;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    padding: 7px 10px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
  }
  .compact-more > summary::-webkit-details-marker { display: none; }
  .compact-more[open] > summary { border-color: #94a3b8; color: #0f172a; }
  .compact-more-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 7px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #f8fafc;
  }
  .compact-more-panel > a,
  .compact-more-panel > form > button {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
  }
  .compact-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    margin-top: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 650;
  }
  .compact-card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 9px !important;
  }
}

@media (max-width: 767px) {
  /* Halaman Materi Guru: contoh paling padat, dibuat khusus agar tidak menumpuk panjang. */
  .compact-material-page > section:first-child .relative.flex { gap: 6px !important; }
  .compact-material-page > section:first-child .inline-flex { padding: 4px 8px !important; font-size: 10px !important; }
  .compact-material-page > section:first-child h1 { margin-top: 7px !important; }
  .compact-material-page > section:first-child p { margin-top: 4px !important; font-size: 12px !important; }
  .compact-material-page > section.grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .compact-material-page > section.grid > div { padding: 8px !important; text-align: center; }
  .compact-material-page > section.grid > div > .text-3xl:first-child { font-size: 1.05rem !important; }
  .compact-material-page > section.grid > div > .mt-3 { margin-top: 3px !important; }
  .compact-material-page > section.grid > div > .text-sm { font-size: 10px !important; line-height: 1.05rem !important; }
  .compact-material-page > section:last-of-type > div:first-child > div:first-child > p { display: none !important; }
  .compact-material-page .material-row { padding: 10px !important; background: #fff !important; }
  .compact-material-page .material-row .text-lg { font-size: 14px !important; line-height: 1.3 !important; }
  .compact-material-page .material-row > div:nth-child(2) { display: none !important; }
  .compact-material-page .material-row > .grid { margin-top: 8px !important; }
  .compact-material-page .material-row > .grid > a,
  .compact-material-page .material-row > .grid > form button,
  .compact-material-page .material-row > .grid > div { height: 36px !important; min-height: 36px !important; font-size: 11px !important; }
}

@media (max-width: 767px) {
  /* Halaman standalone (terutama siswa/kuis/absensi) yang tidak memakai <main>. */
  body.compact-mobile-ui > div.mx-auto,
  body.compact-mobile-ui > div.min-h-screen > div.mx-auto,
  body.compact-mobile-ui > div[id$="Content"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 82px !important;
    max-width: 100% !important;
  }

  body.compact-mobile-ui h1 { font-size: 1.45rem !important; line-height: 1.18 !important; letter-spacing: -.025em !important; }
  body.compact-mobile-ui h2 { font-size: 1.15rem !important; line-height: 1.25 !important; }
  body.compact-mobile-ui h3 { font-size: 1rem !important; line-height: 1.3 !important; }

  body.compact-mobile-ui article[class*="rounded"],
  body.compact-mobile-ui section[class*="rounded"],
  body.compact-mobile-ui div[class*="rounded-[2rem]"],
  body.compact-mobile-ui div[class*="rounded-[32px]"],
  body.compact-mobile-ui div[class*="rounded-[30px]"],
  body.compact-mobile-ui div[class*="rounded-[28px]"] {
    border-radius: 14px !important;
  }

  body.compact-mobile-ui article[class*="p-8"],
  body.compact-mobile-ui article[class*="p-7"],
  body.compact-mobile-ui article[class*="p-6"],
  body.compact-mobile-ui article[class*="p-5"],
  body.compact-mobile-ui article[class*="p-4"] { padding: 10px !important; }

  body.compact-mobile-ui > div.mx-auto > div[class*="bg-gradient-to-"],
  body.compact-mobile-ui > div.min-h-screen > div.mx-auto > div[class*="bg-gradient-to-"] {
    background: #fff !important;
    background-image: none !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 11px !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.045) !important;
  }
  body.compact-mobile-ui > div.mx-auto > div[class*="bg-gradient-to-"] > .absolute,
  body.compact-mobile-ui > div.min-h-screen > div.mx-auto > div[class*="bg-gradient-to-"] > .absolute { display: none !important; }
  body.compact-mobile-ui > div.mx-auto > div[class*="bg-gradient-to-"] [class*="text-white"],
  body.compact-mobile-ui > div.min-h-screen > div.mx-auto > div[class*="bg-gradient-to-"] [class*="text-white"] { color: #0f172a !important; }
  body.compact-mobile-ui > div.mx-auto > div[class*="bg-gradient-to-"] [class*="text-blue-50"],
  body.compact-mobile-ui > div.min-h-screen > div.mx-auto > div[class*="bg-gradient-to-"] [class*="text-blue-50"] { color: #64748b !important; }

  body.compact-mobile-ui article .p-5,
  body.compact-mobile-ui article .p-4 { padding: 10px !important; }
  body.compact-mobile-ui article .mt-5 { margin-top: 8px !important; }
  body.compact-mobile-ui article .mt-4 { margin-top: 7px !important; }
  body.compact-mobile-ui article .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 6px !important; }

  body.compact-mobile-ui a[class*="py-3"],
  body.compact-mobile-ui button[class*="py-3"] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    box-shadow: none !important;
  }

  /* Modal kamera/ujian tetap jelas tapi tidak memakan hampir seluruh layar. */
  body.compact-mobile-ui #cameraGate { padding: 10px !important; }
  body.compact-mobile-ui #cameraGate > div { padding: 12px !important; border-radius: 15px !important; }
  body.compact-mobile-ui #cameraGate .h-64 { height: 11rem !important; }
  body.compact-mobile-ui #cameraGate .h-16.w-16 { width: 42px !important; height: 42px !important; }
  body.compact-mobile-ui #cameraGate p { line-height: 1.45 !important; }

  /* Hilangkan efek hover yang terasa meloncat pada layar sentuh. */
  body.compact-mobile-ui article:hover,
  body.compact-mobile-ui a:hover,
  body.compact-mobile-ui button:hover { transform: none !important; }
}