/* KiSmart / NoteSmart visual polish v3 - 2026-06-15
   Fokus: merapikan login, tab Guru/Admin, input tidak tertutup ikon,
   tinggi halaman login tidak mubazir, dan konten admin tidak tertutup bottom nav. */

:root{
  --ks-green:#087a43;
  --ks-green-dark:#066a39;
  --ks-bg:#f6fbf8;
  --ks-border:#dcebe3;
  --ks-text:#101815;
  --ks-muted:#64746c;
}

html,body,#root{
  width:100%;
  min-height:100%;
  background:var(--ks-bg);
}

body{
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */
body:has(#teacher_code),
body:has(#username),
body:has(#password){
  background:linear-gradient(180deg,#078246 0%,#079151 48%,#f6fbf8 48%,#f6fbf8 100%) !important;
}

/* Login container: jangan terlalu tinggi dan jangan menyisakan ruang kosong besar. */
#root > div:has(#teacher_code),
#root > div:has(#username),
#root > div:has(#password){
  min-height:100dvh !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:clamp(1.25rem,4vh,2.5rem) 1.05rem 2.5rem !important;
  background:linear-gradient(180deg,#078246 0%,#079151 54%,#f6fbf8 54%,#f6fbf8 100%) !important;
}

#root > div:has(#teacher_code) > div,
#root > div:has(#username) > div,
#root > div:has(#password) > div{
  width:100% !important;
  max-width:430px !important;
}

/* Card login dibuat lebih kompak dan profesional. */
#root div:has(> form #teacher_code),
#root div:has(> form #username),
#root div:has(> form #password){
  border-radius:24px !important;
  border:1px solid rgba(220,235,227,.95) !important;
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 22px 55px rgba(7,70,43,.18) !important;
  padding:1.05rem !important;
}

@media (min-width:430px){
  #root div:has(> form #teacher_code),
  #root div:has(> form #username),
  #root div:has(> form #password){
    padding:1.25rem !important;
  }
}

/* Segmented Guru/Admin harus 1 baris, bukan bersusun. */
#root div:has(> form #teacher_code) > .mb-4.grid,
#root div:has(> form #username) > .mb-4.grid,
#root div:has(> form #password) > .mb-4.grid,
#root div:has(> form) .mb-4.grid.grid-cols-2{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:.45rem !important;
  padding:.38rem !important;
  border-radius:18px !important;
  background:#edf5ef !important;
  width:100% !important;
}

#root div:has(> form #teacher_code) > .mb-4.grid > button,
#root div:has(> form #username) > .mb-4.grid > button,
#root div:has(> form #password) > .mb-4.grid > button,
#root div:has(> form) .mb-4.grid.grid-cols-2 > button{
  width:100% !important;
  min-height:46px !important;
  height:46px !important;
  border:0 !important;
  border-radius:14px !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 .75rem !important;
  font-weight:800 !important;
  font-size:.95rem !important;
  line-height:1 !important;
  transform:none !important;
}

/* Login labels lebih jelas. */
label[for="teacher_code"],
label[for="username"],
label[for="password"]{
  display:block !important;
  margin-bottom:.45rem !important;
  color:var(--ks-text) !important;
  font-size:.92rem !important;
  font-weight:800 !important;
}

/* Input login: padding kiri diperbesar agar teks tidak tertutup ikon. */
#teacher_code,
#username,
#password{
  width:100% !important;
  height:54px !important;
  min-height:54px !important;
  border-radius:16px !important;
  border:1px solid var(--ks-border) !important;
  background:#fff !important;
  color:var(--ks-text) !important;
  font-size:16px !important;
  line-height:54px !important;
  padding-left:3.15rem !important;
  padding-right:1rem !important;
  box-shadow:0 6px 18px rgba(15,23,42,.04) inset, 0 1px 2px rgba(15,23,42,.04) !important;
}

#password{
  padding-right:3.5rem !important;
}

#teacher_code::placeholder,
#username::placeholder,
#password::placeholder{
  color:#89958f !important;
  opacity:1 !important;
}

#teacher_code:focus,
#username:focus,
#password:focus{
  outline:none !important;
  border-color:var(--ks-green) !important;
  box-shadow:0 0 0 4px rgba(8,122,67,.12), 0 8px 20px rgba(15,23,42,.06) !important;
}

/* Ikon kiri input: kecil, tidak menimpa teks. */
div.relative:has(> #teacher_code) > span[aria-hidden="true"],
div.relative:has(> #username) > span[aria-hidden="true"],
div.relative:has(> #password) > span[aria-hidden="true"]{
  position:absolute !important;
  left:1rem !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:1.25rem !important;
  height:1.25rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#6f7d76 !important;
  z-index:2 !important;
  pointer-events:none !important;
}

div.relative:has(> #teacher_code) > span[aria-hidden="true"] svg,
div.relative:has(> #username) > span[aria-hidden="true"] svg,
div.relative:has(> #password) > span[aria-hidden="true"] svg{
  width:1.15rem !important;
  height:1.15rem !important;
  stroke-width:2.2 !important;
}

/* Tombol mata password jangan menjadi bubble besar. */
div.relative:has(> #password) > span.absolute{
  right:.65rem !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:3 !important;
}

div.relative:has(> #password) > span.absolute > button,
div.relative:has(> #password) button[type="button"]{
  width:2.25rem !important;
  height:2.25rem !important;
  min-width:2.25rem !important;
  min-height:2.25rem !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#6f7d76 !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
}

div.relative:has(> #password) button[type="button"]:hover,
div.relative:has(> #password) button[type="button"]:active{
  background:#edf5ef !important;
  transform:none !important;
}

form:has(#teacher_code),
form:has(#username),
form:has(#password){
  gap:.95rem !important;
}

form:has(#teacher_code) button[type="submit"],
form:has(#username) button[type="submit"],
form:has(#password) button[type="submit"]{
  width:100% !important;
  min-height:54px !important;
  border-radius:16px !important;
  background:var(--ks-green) !important;
  color:#fff !important;
  border:0 !important;
  font-size:1rem !important;
  font-weight:850 !important;
  box-shadow:0 14px 26px rgba(8,122,67,.20) !important;
}

form:has(#teacher_code) button[type="submit"]:hover,
form:has(#username) button[type="submit"]:hover,
form:has(#password) button[type="submit"]:hover{
  background:var(--ks-green-dark) !important;
  transform:translateY(-1px) !important;
}

/* Link kembali login tidak perlu memberi ruang kosong besar. */
#root > div:has(#teacher_code) p.mt-4,
#root > div:has(#username) p.mt-4,
#root > div:has(#password) p.mt-4{
  margin-top:.85rem !important;
}

/* =========================================================
   APP SHELL / ADMIN PAGES
   ========================================================= */
/* Konten tidak tertutup bottom navigation di webview/HP. */
main,
.app-shell,
.page-shell,
[class*="pb-safe"],
[class*="safe-bottom"]{
  padding-bottom:calc(108px + env(safe-area-inset-bottom,0px)) !important;
}

@media (max-width:768px){
  /* Jangan memaksa SEMUA grid 2 kolom menjadi 1 kolom. Tab kecil dan kontrol pilihan tetap 2 kolom. */
  .grid.grid-cols-2:not(form .grid):not(.notesmart-admin-data-table):not([class*="sm:grid-cols"]){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* Card menu admin lebih rapat dan tidak tertutup navbar. */
  a.rounded-2xl,
  button.rounded-2xl,
  div.rounded-2xl{
    max-width:100% !important;
  }
}

/* Header webview / app: konten jangan terlalu menempel. */
#root .space-y-6,
#root .space-y-5{
  scroll-margin-bottom:120px;
}

/* Kartu dashboard/hotfix tidak terlalu besar di HP. */
@media (max-width:480px){
  #root section,
  #root article{
    max-width:100%;
  }

  #root .text-3xl{font-size:1.7rem !important;line-height:1.18 !important;}
  #root .text-2xl{font-size:1.35rem !important;line-height:1.25 !important;}
}