/**
 * LMS PINTAR SMPN 1 Klampis - Sistem Desain Responsif Terpadu
 * Mengoptimalkan kenyamanan penggunaan di smartphone (320px-480px),
 * tablet (768px-1024px), dan desktop (1024px+).
 */

/* ========================================================
   1. TOUCH SCROLLING & TABEL DATA RESPONSIP
   ======================================================== */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

/* Scroll hint indicator for tables */
.table-responsive-wrapper {
  position: relative;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  /* Ensure data tables maintain legible column widths on phones */
  table:not(.table-compact) {
    min-width: 620px;
  }

  /* Wide analytical / matrix / leger tables require more horizontal room */
  #adminLegerComprehensiveView table,
  #adminLegerMatrixView table,
  #tableDafnilKomprehensif,
  #studentComprehensiveViewContainer table,
  #studentComprehensiveTable,
  #legerComprehensiveTable,
  #legerMatrixTable,
  table[id*="Leger"],
  table[id*="leger"],
  table[id*="Dafnil"],
  table[id*="dafnil"] {
    min-width: 1380px !important;
    width: max-content !important;
    table-layout: auto !important;
    white-space: nowrap !important;
  }

  /* Preserve sticky first columns if used (except student comprehensive table on mobile) */
  table th.sticky-col,
  table td.sticky-col {
    position: sticky;
    left: 0;
    z-index: 10;
  }

  /* Di layar smartphone (<= 768px): jangan bekukan kolom No & Mata Pelajaran agar tabel nilai komprehensif bisa di-scroll bebas ke kiri dan kanan */
  #studentComprehensiveViewContainer table th,
  #studentComprehensiveViewContainer table td,
  #studentComprehensiveTable th,
  #studentComprehensiveTable td {
    position: static !important;
    left: auto !important;
    white-space: nowrap !important;
  }

  /* Proteksi lebar kolom tabel nilai komprehensif siswa agar tidak bertumpuk/gepeng di HP */
  .col-comp-no, #studentComprehensiveViewContainer .col-comp-no, #dafnilComprehensiveTable .col-comp-no { min-width: 38px !important; width: 38px; }
  .col-comp-mapel, #studentComprehensiveViewContainer .col-comp-mapel, #dafnilComprehensiveTable .col-comp-mapel { min-width: 190px !important; }
  .col-comp-tp, #studentComprehensiveViewContainer .col-comp-tp, #dafnilComprehensiveTable .col-comp-tp { min-width: 44px !important; }
  .col-comp-tahfidz, #studentComprehensiveViewContainer .col-comp-tahfidz, #dafnilComprehensiveTable .col-comp-tahfidz { min-width: 65px !important; }
  .col-comp-rata, #studentComprehensiveViewContainer .col-comp-rata, #dafnilComprehensiveTable .col-comp-rata { min-width: 65px !important; }
  .col-comp-pas, #studentComprehensiveViewContainer .col-comp-pas, #dafnilComprehensiveTable .col-comp-pas { min-width: 55px !important; }
  .col-comp-rapor, #studentComprehensiveViewContainer .col-comp-rapor, #dafnilComprehensiveTable .col-comp-rapor { min-width: 65px !important; }
  .col-comp-konversi, #studentComprehensiveViewContainer .col-comp-konversi, #dafnilComprehensiveTable .col-comp-konversi { min-width: 65px !important; }
  .col-comp-predikat, #studentComprehensiveViewContainer .col-comp-predikat, #dafnilComprehensiveTable .col-comp-predikat { min-width: 60px !important; }
  .col-comp-status, #studentComprehensiveViewContainer .col-comp-status, #dafnilComprehensiveTable .col-comp-status { min-width: 80px !important; }
}

/* ========================================================
   2. NORMALISASI MODAL POPUP DI LAYAR PONSEL
   ======================================================== */
.modal-overlay:not(.hidden),
div[id*="modal"][class*="fixed"]:not(.hidden),
div[id*="Modal"][class*="fixed"]:not(.hidden) {
  padding: 0.5rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

[hidden] {
  display: none !important;
}

.modal-content,
div[id*="modal"][class*="fixed"] > div[class*="rounded"],
div[id*="Modal"][class*="fixed"] > div[class*="rounded"],
div[id*="modal"].fixed > div[class*="rounded"],
div[id*="Modal"].fixed > div[class*="rounded"] {
  width: 100% !important;
  max-width: min(94vw, 680px) !important;
  max-height: 92vh !important;
  margin: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Modal header & footer touch friendliness */
@media (max-width: 640px) {
  .modal-content,
  div[id*="modal"][class*="fixed"] > div[class*="rounded"],
  div[id*="Modal"][class*="fixed"] > div[class*="rounded"],
  div[id*="modal"].fixed > div[class*="rounded"],
  div[id*="Modal"].fixed > div[class*="rounded"] {
    padding: 1rem !important;
    border-radius: 1.25rem !important;
  }
}

/* Pengecualian khusus untuk Modal Cek Dafnil Harian Siswa agar lebar dan leluasa */
#modalCekDafnil:not(.hidden) {
  padding: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 9999 !important;
}

#modalCekDafnil > div {
  width: 96vw !important;
  max-width: 1560px !important;
  height: 94vh !important;
  max-height: 94vh !important;
  margin: auto !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

@media (min-width: 768px) {
  #modalCekDafnil:not(.hidden) {
    padding: 1.25rem !important;
  }
  #modalCekDafnil > div {
    border-radius: 1.5rem !important;
  }
}

/* ========================================================
   3. KONTROL FORMULIR, INPUT & TARGET SENTUH (TOUCH TARGETS)
   ======================================================== */
@media (max-width: 768px) {
  button,
  a.btn,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  select,
  .touch-target {
    min-height: 40px;
  }

  /* Form filters: stack cleanly on phones */
  .filter-bar-responsive {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  .filter-bar-responsive > * {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ========================================================
   4. TOPBAR NAVIGATION RESPONSIVE ERGONOMICS
   ======================================================== */
@media (max-width: 640px) {
  /* Brand text optimization - ensure title & subtitle are clearly visible on mobile */
  .brand-subtext,
  .brand-subtitle,
  .portal-topbar .brand-subtitle {
    display: block !important;
    font-size: 0.65rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    opacity: 0.95 !important;
  }

  .portal-topbar .brand-title {
    font-size: 0.85rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .brand-badge-mobile-hide,
  .portal-topbar .brand-badge {
    display: none !important;
  }

  /* Portal topbar header row on mobile: non-wrapping, neat vertical center */
  .portal-topbar {
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .portal-topbar .brand-wrap {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    gap: 0.5rem !important;
  }

  /* Header action buttons on mobile: cleanly aligned center vertically & flush right */
  .header-actions,
  .header-actions-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.35rem !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
  }

  .header-actions button:not(.hidden):not(.btn-desktop-logout),
  .header-actions > button:not(.hidden):not(.btn-desktop-logout),
  .header-actions > div:not(.hidden):not(.btn-desktop-logout),
  .header-actions-mobile button:not(.hidden):not(.btn-desktop-logout) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0.4rem 0.5rem !important;
    border-radius: 0.75rem !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .header-actions button.hidden,
  .header-actions > button.hidden,
  .header-actions .btn-desktop-logout,
  .btn-desktop-logout {
    display: none !important;
  }

  /* Admin & Teacher identity pill */
  .user-pill-compact {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .user-pill-compact .user-role-label,
  .user-pill-compact .user-name-label {
    display: none !important;
  }
}

/* Aturan tombol logout header desktop: sembunyikan di mobile (< 768px), tampilkan di desktop (>= 768px) */
@media (max-width: 767.98px) {
  .btn-desktop-logout,
  .header-actions .btn-desktop-logout,
  .header-actions button.btn-desktop-logout,
  .header-actions button.hidden,
  .header-actions > button.hidden {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .btn-desktop-logout,
  .header-actions .btn-desktop-logout,
  .header-actions button.btn-desktop-logout {
    display: inline-flex !important;
  }
}

/* Mobile drawer backdrop */
.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 45;
  transition: opacity 0.25s ease;
}

/* ========================================================
   5. KARTU STATISTIK & HERO ACTION BUTTONS
   ======================================================== */
@media (max-width: 640px) {
  /* Stat cards header collision prevention */
  .stat-card {
    padding: 0.875rem !important;
  }

  .stat-card .stat-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* Hero quick action buttons */
  .hero-quick-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .hero-quick-actions button {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.5rem !important;
    font-size: 11px !important;
  }
}

/* ========================================================
   6. BOTTOM NAVIGATION BAR (SISWA)
   ======================================================== */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.dark .mobile-bottom-nav {
  background: rgba(15, 23, 42, 0.95);
  border-top: 1px solid rgba(30, 41, 59, 0.8);
}

.mobile-bottom-nav .mob-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  padding: 0.35rem 0.4rem;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  min-width: 46px;
  flex: 1;
  max-width: 68px;
}

.dark .mobile-bottom-nav .mob-nav-btn {
  color: #94a3b8;
}

.mobile-bottom-nav .mob-nav-btn.active {
  color: #0f766e;
  background: rgba(15, 118, 110, 0.08);
}

.dark .mobile-bottom-nav .mob-nav-btn.active {
  color: #2dd4bf;
  background: rgba(45, 212, 191, 0.15);
}

.mobile-bottom-nav .mob-nav-btn i,
.mobile-bottom-nav .mob-nav-btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* ========================================================
   7. INTERFACE UJIAN CBT SISWA (MOBILE OPTIMIZED)
   ======================================================== */
@media (max-width: 640px) {
  #cbtPlayerScreen header {
    padding: 0.65rem 0.85rem !important;
    gap: 0.5rem;
  }

  #cbtPlayerScreen header h2 {
    font-size: 13px !important;
  }

  #cbtTimerBadge {
    padding: 0.35rem 0.65rem !important;
    font-size: 12px !important;
  }

  #cbtOptionsContainer .cbt-option-item,
  #cbtOptionsContainer label {
    min-height: 46px;
    padding: 0.75rem 1rem !important;
    font-size: 13px !important;
  }

  /* Horizontal quick jump numbers strip for mobile CBT */
  .cbt-quick-nav-strip {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.35rem;
    padding: 0.5rem 0;
    scrollbar-width: none;
  }
  .cbt-quick-nav-strip::-webkit-scrollbar {
    display: none;
  }
}

/* ========================================================
   8. SWEETALERT RESPONSIVE TWEAKS
   ======================================================== */
.swal2-popup {
  max-width: 92vw !important;
  border-radius: 1.25rem !important;
}

@media (max-width: 480px) {
  .swal2-title {
    font-size: 16px !important;
  }
  .swal2-html-container {
    font-size: 13px !important;
  }
  .swal2-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }
  .swal2-actions button {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ========================================================
   9. KARTU & TABEL ASESMEN SISWA (SOAL TP, LM & PAS)
   ======================================================== */
@media (max-width: 640px) {
  /* Pastikan tombol aksi soal TP dan kumpulkan tugas selalu fleksibel dan tidak terpotong */
  #assessmentTpCards button,
  #assessmentTpCards a,
  #assessmentCbtCards button,
  #assessmentPasCards button {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}

/* ========================================================
   10. ADMIN DASHBOARD: KARTU GURU & ASESMEN (MATERI, TP, LM, PAS)
   ======================================================== */
.admin-teacher-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-teacher-card:hover {
  box-shadow: 0 10px 25px -5px rgba(20, 184, 166, 0.12), 0 8px 10px -6px rgba(20, 184, 166, 0.06);
}

/* Tombol-tombol pada item materi & soal di kartu guru */
.admin-teacher-card button,
.admin-teacher-card a[href] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

@media (max-width: 640px) {
  /* Kompakkan kartu guru di layar smartphone agar tidak membuang ruang */
  .admin-teacher-card {
    padding: 0.875rem !important;
    border-radius: 1.125rem !important;
    margin-bottom: 0.75rem !important;
  }

  .admin-teacher-card h3 {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }

  .admin-teacher-card .chevron-icon {
    width: 1.85rem !important;
    height: 1.85rem !important;
  }

  /* Baris item soal/materi guru pada mobile: stack aksi secara rapi */
  .admin-teacher-card .border-slate-100,
  .admin-teacher-card [id^="adminAssessmentPanel_"] > div {
    padding: 0.75rem !important;
    border-radius: 0.875rem !important;
  }

  /* Tombol aksi item soal & materi */
  .admin-teacher-card [id^="adminAssessmentPanel_"] button,
  .admin-teacher-card [id^="adminAssessmentPanel_"] a {
    min-height: 32px !important;
    padding: 0.35rem 0.6rem !important;
    font-size: 11px !important;
  }

  /* Modal Assessment Frame (Buka Soal TP / LM / PAS via Iframe) */
  #modalAssessmentFrame {
    padding: 0.35rem !important;
  }

  #modalAssessmentFrame > div {
    height: 94vh !important;
    max-height: 94vh !important;
    padding: 0.75rem !important;
    border-radius: 1.25rem !important;
    gap: 0.5rem !important;
  }

  #modalAssessmentFrame iframe {
    height: calc(100% - 48px) !important;
    border-radius: 0.75rem !important;
  }

  /* Toolbar dan Filter pada tab Materi, TP, LM, PAS */
  #tab-admin-materi .filter-toolbar,
  #tab-admin-tugas .filter-toolbar,
  #tab-admin-cbt .filter-toolbar,
  #tab-admin-soal-pas .filter-toolbar {
    padding: 0.75rem !important;
  }
}

/* ========================================================
   11. DAFNIL HARIAN KOMPREHENSIF & MOBILE GURU NAVIGATION
   ======================================================== */

/* Mobile Bottom Navigation Bar */
.mobile-nav-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.mobile-nav-btn:active {
  transform: scale(0.95);
}

.safe-bottom {
  padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
}

#mobileBottomNav,
nav.safe-bottom,
.mobile-bottom-nav {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 768px) {
  /* Dafnil Harian: Izinkan tabel bergeser horizontal secara halus tanpa terhimpit */
  #adminLegerComprehensiveView,
  #adminLegerMatrixView {
    border-radius: 1rem !important;
  }

  #adminLegerComprehensiveView > .overflow-x-auto,
  #adminLegerMatrixView > .overflow-x-auto,
  #adminLegerComprehensiveView .overflow-x-auto,
  #adminLegerMatrixView .overflow-x-auto {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    scrollbar-width: thin;
    padding-bottom: 0.5rem;
  }

  /* min-width 1380px menjamin kolom Dafnil & Leger tidak terkompresi atau bertumpuk */
  #adminLegerComprehensiveView table,
  #adminLegerMatrixView table,
  #tableDafnilKomprehensif,
  #studentComprehensiveViewContainer table,
  #studentComprehensiveTable {
    min-width: 1380px !important;
    width: max-content !important;
    table-layout: auto !important;
    white-space: nowrap !important;
  }

  #adminLegerComprehensiveView th,
  #adminLegerComprehensiveView td,
  #adminLegerMatrixView th,
  #adminLegerMatrixView td,
  #tableDafnilKomprehensif th,
  #tableDafnilKomprehensif td,
  #studentComprehensiveViewContainer th,
  #studentComprehensiveViewContainer td,
  #studentComprehensiveTable th,
  #studentComprehensiveTable td {
    white-space: nowrap !important;
  }

  /* Di layar mobile, un-stick kolom matriks rapor agar tidak menutupi seluruh layar */
  #adminLegerMatrixView th.sticky,
  #adminLegerMatrixView td.sticky {
    position: static !important;
    left: auto !important;
  }

  /* Kotak input nilai TP, LM, PAS di mobile: nyaman diklik dan terbaca */
  #adminLegerComprehensiveView table input[type="number"],
  #adminLegerMatrixView table input[type="number"] {
    width: 34px !important;
    height: 28px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    padding: 0 !important;
    touch-action: manipulation !important;
  }

  /* Header Card Dafnil di mobile */
  #adminLegerComprehensiveView > div:first-child {
    padding: 0.75rem 1rem !important;
    gap: 0.5rem !important;
  }

  /* Filter toolbar Dafnil di mobile */
  #tab-buku-nilai .glass-card:first-child {
    padding: 0.875rem !important;
  }

  /* Guru Teacher Cards (Soal TP, LM, PAS) */
  .guru-teacher-card {
    padding: 0.875rem !important;
    border-radius: 1.125rem !important;
    margin-bottom: 0.75rem !important;
  }

  .guru-teacher-card h3 {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }

  /* Tombol aksi Soal TP / LM di kartu guru mobile */
  .guru-teacher-card button,
  .guru-teacher-card a {
    min-height: 30px !important;
    padding: 0.35rem 0.6rem !important;
    font-size: 11px !important;
    touch-action: manipulation;
  }

  /* Modal Assessment Frame untuk Soal TP/LM */
  #modalAssessmentFrame > div {
    width: 96vw !important;
    max-width: 96vw !important;
    height: 92vh !important;
    max-height: 92vh !important;
    padding: 0.65rem !important;
  }
}

/* ========================================================
   13. SMOOTH TOUCH SCROLLING UNTUK MODAL & MATERI (LAYAR SENTUH MOBILE)
   ======================================================== */
/* Scrollable modal wrapper */
#modalMateriMapel > div,
#modalMateriTextViewer > div,
#modalLatihanPemahaman > div,
#modalCeritaReflektif > div,
#modalAssessmentFrame > div {
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  scroll-behavior: smooth;
}

/* Pastikan sentuhan jari di tengah layar (pada tombol, teks, ikon, baris aktivitas) langsung mengalir ke scroll vertikal tanpa terjebak */
#modalMateriMapel,
#modalMateriMapel *,
#modalMateriPmmContainer,
#modalMateriPmmContainer * {
  touch-action: pan-y !important;
}

/* Hilangkan hambatan scroll pada card accordion dan item di dalamnya */
#modalMateriPmmContainer,
#modalMateriPmmContainer > div,
#modalMateriPmmContainer [id^="accordion-item-"],
#modalMateriPmmContainer [id^="body-"],
#modalMateriMapel [id^="accordion-item-"],
#modalMateriMapel [id^="body-"] {
  overflow: visible !important;
  overscroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
  max-height: none !important;
  touch-action: pan-y !important;
}

#modalMateriPmmContainer button,
#modalMateriPmmContainer a,
#modalMateriMapel button,
#modalMateriMapel a {
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y !important;
  -webkit-tap-highlight-color: transparent;
}

/* ========================================================
   14. PORTAL LOGIN & REGISTRASI RESPONSIVE (MOBILE ERGONOMICS)
   ======================================================== */
html, body {
  max-width: 100%;
}

/* Strict 100% viewport locking on mobile login screen */
html.auth-login-mode,
body.auth-login-mode {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: auto !important;
}

#loginScreen.auth-login-mode {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

#loginScreen.auth-login-mode input,
#loginScreen.auth-login-mode button,
#loginScreen.auth-login-mode select,
#loginScreen.auth-login-mode a {
  touch-action: manipulation !important;
}

@media (max-width: 640px) {
  #loginScreen {
    padding-top: max(0.5rem, env(safe-area-inset-top)) !important;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
    padding-left: max(0.65rem, env(safe-area-inset-left)) !important;
    padding-right: max(0.65rem, env(safe-area-inset-right)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Prevent iOS Safari auto-zoom on input focus */
  #loginScreen input[type="text"],
  #loginScreen input[type="password"],
  #loginScreen input[type="tel"],
  #loginScreen select {
    font-size: 16px !important;
  }
}