/* NoteSmart V28: rapikan mobile card dari render awal, tanpa konversi visual yang terasa berkedip. */
html, body, #root {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  overscroll-behavior-x: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
#root, #root > div, main, section, article { min-width: 0 !important; }
* { scrollbar-width: thin; }
input, select, textarea { font-size: 16px !important; }
button, a, [role="button"], input, select, textarea { -webkit-tap-highlight-color: transparent !important; }

@media (max-width: 768px) {
  html, body { scroll-behavior: auto !important; }
  body { min-height: 100svh; }

  /* Hilangkan rasa bergetar saat tombol/input ditekan. */
  button, a, [role="button"], input, select, textarea {
    transition-property: background-color, border-color, color, box-shadow, opacity !important;
    transition-duration: .12s !important;
    transform: none !important;
  }
  button:active, a:active, [role="button"]:active { transform: none !important; }

  /* Konten utama stabil di atas bottom navigation. */
  main, #root main, #root > div > div {
    max-width: 100% !important;
  }
  main { padding-left: 12px !important; padding-right: 12px !important; padding-bottom: max(104px, calc(92px + env(safe-area-inset-bottom))) !important; }

  /* Kolom pencarian: ikon dan placeholder tidak tumpang tindih. */
  .relative > svg.absolute.left-3 + input.ns-input,
  .relative > svg.absolute + input.ns-input,
  input.ns-input.pl-9 {
    padding-left: 46px !important;
  }
  .relative > svg.absolute.left-3,
  .relative > svg.absolute {
    left: 16px !important;
    pointer-events: none !important;
  }

  .ns-card {
    border-radius: 24px !important;
    max-width: 100% !important;
    overflow: visible !important;
    contain: layout paint;
  }

  /* Layout kartu bawaan untuk semua tabel admin yang dirender oleh komponen master data. */
  table.ns-admin-card-table,
  table.ns-v26-student-card-table,
  table.ns-v26-teacher-card-table,
  table.ns-student-list-table-v17,
  table.ns-teacher-list-table-v18 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
  }

  table.ns-admin-card-table thead,
  table.ns-v26-student-card-table thead,
  table.ns-v26-teacher-card-table thead,
  table.ns-student-list-table-v17 thead,
  table.ns-teacher-list-table-v18 thead,
  table.ns-admin-card-table tr.ns-hidden-header-row-v22,
  table.ns-v26-student-card-table tr.ns-v26-header-row,
  table.ns-v26-teacher-card-table tr.ns-v26-header-row,
  table.ns-student-list-table-v17 tr.ns-hidden-header-row-v22,
  table.ns-teacher-list-table-v18 tr.ns-hidden-header-row-v22 {
    display: none !important;
  }

  table.ns-admin-card-table tbody,
  table.ns-v26-student-card-table tbody,
  table.ns-v26-teacher-card-table tbody,
  table.ns-student-list-table-v17 tbody,
  table.ns-teacher-list-table-v18 tbody {
    display: block !important;
    width: 100% !important;
  }

  table.ns-admin-card-table tr,
  table.ns-v26-student-card-table tr,
  table.ns-v26-teacher-card-table tr,
  table.ns-student-list-table-v17 tr,
  table.ns-teacher-list-table-v18 tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    padding: 16px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .075) !important;
    transform: none !important;
    contain: layout paint;
  }

  table.ns-admin-card-table td,
  table.ns-v26-student-card-table td,
  table.ns-v26-teacher-card-table td,
  table.ns-student-list-table-v17 td,
  table.ns-teacher-list-table-v18 td {
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 8px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    color: #1f2937 !important;
    text-align: left !important;
  }

  table.ns-admin-card-table td::before,
  table.ns-v26-student-card-table td::before,
  table.ns-v26-teacher-card-table td::before,
  table.ns-student-list-table-v17 td::before,
  table.ns-teacher-list-table-v18 td::before {
    content: attr(data-ns-label);
    display: block !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  /* Nama dibuat menjadi judul kartu. */
  table.ns-admin-card-table td[data-ns-key="teacher_name"],
  table.ns-admin-card-table td[data-ns-key="student_name"],
  table.ns-admin-card-table td[data-ns-key="class_name"],
  table.ns-admin-card-table td[data-ns-key="subject_name"],
  table.ns-admin-card-table td[data-ns-key="name"],
  table.ns-admin-card-table td[data-ns-key="title"],
  table.ns-v26-student-card-table td[data-ns-label="Nama Siswa"],
  table.ns-v26-teacher-card-table td[data-ns-label="Nama Guru"],
  table.ns-student-list-table-v17 td[data-ns-label="Nama Siswa"],
  table.ns-teacher-list-table-v18 td[data-ns-label="Nama Guru"] {
    display: block !important;
    padding: 8px 0 14px !important;
    margin-bottom: 6px !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    color: #111827 !important;
  }
  table.ns-admin-card-table td[data-ns-key="teacher_name"]::before,
  table.ns-admin-card-table td[data-ns-key="student_name"]::before,
  table.ns-admin-card-table td[data-ns-key="class_name"]::before,
  table.ns-admin-card-table td[data-ns-key="subject_name"]::before,
  table.ns-admin-card-table td[data-ns-key="name"]::before,
  table.ns-admin-card-table td[data-ns-key="title"]::before,
  table.ns-v26-student-card-table td[data-ns-label="Nama Siswa"]::before,
  table.ns-v26-teacher-card-table td[data-ns-label="Nama Guru"]::before,
  table.ns-student-list-table-v17 td[data-ns-label="Nama Siswa"]::before,
  table.ns-teacher-list-table-v18 td[data-ns-label="Nama Guru"]::before {
    margin-bottom: 5px !important;
  }

  /* Field ringkas/chip. */
  table.ns-admin-card-table td[data-ns-key="teacher_code"],
  table.ns-admin-card-table td[data-ns-key="class_code"],
  table.ns-admin-card-table td[data-ns-key="nis"],
  table.ns-admin-card-table td[data-ns-key="wa_number"],
  table.ns-admin-card-table td[data-ns-key="parent_wa_number"],
  table.ns-admin-card-table td[data-ns-key="group_wa_number"],
  table.ns-admin-card-table td[data-ns-key="username"],
  table.ns-admin-card-table td[data-ns-key="role"],
  table.ns-admin-card-table td[data-ns-key="active"],
  table.ns-admin-card-table td[data-ns-label="Status"],
  table.ns-v26-student-card-table td[data-ns-label="Kelas"],
  table.ns-v26-student-card-table td[data-ns-label="NISN"],
  table.ns-v26-student-card-table td[data-ns-label="WA Ortu"],
  table.ns-v26-student-card-table td[data-ns-label="WA"],
  table.ns-v26-student-card-table td[data-ns-label="Status"],
  table.ns-v26-teacher-card-table td[data-ns-label="Kode Guru"],
  table.ns-v26-teacher-card-table td[data-ns-label="WA"],
  table.ns-v26-teacher-card-table td[data-ns-label="Status"],
  table.ns-student-list-table-v17 td[data-ns-label="Kelas"],
  table.ns-student-list-table-v17 td[data-ns-label="NISN"],
  table.ns-student-list-table-v17 td[data-ns-label="WA Ortu"],
  table.ns-student-list-table-v17 td[data-ns-label="WA"],
  table.ns-student-list-table-v17 td[data-ns-label="Status"],
  table.ns-teacher-list-table-v18 td[data-ns-label="Kode Guru"],
  table.ns-teacher-list-table-v18 td[data-ns-label="WA"],
  table.ns-teacher-list-table-v18 td[data-ns-label="Status"] {
    background: #f8fafc !important;
    border-radius: 16px !important;
    padding: 10px 12px !important;
    margin: 6px 0 !important;
  }

  table.ns-admin-card-table td[data-ns-key="active"] .ns-chip,
  table.ns-v26-student-card-table td[data-ns-label="Status"] .ns-chip,
  table.ns-v26-teacher-card-table td[data-ns-label="Status"] .ns-chip,
  table.ns-student-list-table-v17 td[data-ns-label="Status"] .ns-chip,
  table.ns-teacher-list-table-v18 td[data-ns-label="Status"] .ns-chip {
    width: 100% !important;
    justify-content: center !important;
    min-height: 34px !important;
    border-radius: 999px !important;
  }

  /* Aksi selalu bagian bawah kartu. */
  table.ns-admin-card-table td[data-ns-key="actions"],
  table.ns-admin-card-table td[data-ns-label="Aksi"],
  table.ns-v26-student-card-table td[data-ns-label="Aksi"],
  table.ns-v26-teacher-card-table td[data-ns-label="Aksi"],
  table.ns-student-list-table-v17 td[data-ns-label="Aksi"],
  table.ns-teacher-list-table-v18 td[data-ns-label="Aksi"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-top: 14px !important;
    margin-top: 12px !important;
    border-top: 1px dashed #e5e7eb !important;
    grid-template-columns: none !important;
  }
  table.ns-admin-card-table td[data-ns-key="actions"]::before,
  table.ns-admin-card-table td[data-ns-label="Aksi"]::before,
  table.ns-v26-student-card-table td[data-ns-label="Aksi"]::before,
  table.ns-v26-teacher-card-table td[data-ns-label="Aksi"]::before,
  table.ns-student-list-table-v17 td[data-ns-label="Aksi"]::before,
  table.ns-teacher-list-table-v18 td[data-ns-label="Aksi"]::before {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    text-align: right !important;
  }
  table.ns-admin-card-table td[data-ns-key="actions"] button,
  table.ns-admin-card-table td[data-ns-key="actions"] a,
  table.ns-admin-card-table td[data-ns-key="actions"] [role="button"],
  table.ns-v26-student-card-table td[data-ns-label="Aksi"] button,
  table.ns-v26-student-card-table td[data-ns-label="Aksi"] a,
  table.ns-v26-student-card-table td[data-ns-label="Aksi"] [role="button"],
  table.ns-v26-teacher-card-table td[data-ns-label="Aksi"] button,
  table.ns-v26-teacher-card-table td[data-ns-label="Aksi"] a,
  table.ns-v26-teacher-card-table td[data-ns-label="Aksi"] [role="button"],
  table.ns-student-list-table-v17 td[data-ns-label="Aksi"] button,
  table.ns-student-list-table-v17 td[data-ns-label="Aksi"] a,
  table.ns-student-list-table-v17 td[data-ns-label="Aksi"] [role="button"],
  table.ns-teacher-list-table-v18 td[data-ns-label="Aksi"] button,
  table.ns-teacher-list-table-v18 td[data-ns-label="Aksi"] a,
  table.ns-teacher-list-table-v18 td[data-ns-label="Aksi"] [role="button"] {
    flex: 1 1 92px !important;
    min-width: 92px !important;
    min-height: 42px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }
  table.ns-admin-card-table td[data-ns-key="actions"] button:empty,
  table.ns-v26-teacher-card-table td[data-ns-label="Aksi"] button:empty,
  table.ns-v26-student-card-table td[data-ns-label="Aksi"] button:empty { flex: 0 0 42px !important; min-width: 42px !important; }

  /* Wrapper tabel tidak lagi memicu scroll horizontal yang menyebabkan layar terasa geser. */
  .overflow-x-auto:has(table.ns-admin-card-table),
  .overflow-x-auto:has(table.ns-v26-student-card-table),
  .overflow-x-auto:has(table.ns-v26-teacher-card-table),
  .ns-v26-table-wrap,
  .ns-student-table-wrap-v17,
  .ns-teacher-table-wrap-v18 {
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Tampilan jurnal admin/guru lebih stabil dan tidak memaksa teks keluar layar. */
  [data-testid^="jurnal-row-"],
  [data-testid*="jurnal-row"],
  [class*="jurnal"] .ns-card,
  [data-testid^="laporan-"] .ns-card {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  [data-testid^="jurnal-row-"] button,
  [data-testid*="jurnal-row"] button {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Tanda tangan: halaman tidak ikut bergeser saat menggambar. */
  canvas, canvas.ns-signature-canvas, canvas[data-testid="signature-canvas"] {
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    image-rendering: auto !important;
  }
}