/* ==========================================================================
   REFRESH 2026 — Halaman Login (desain meniru TailAdmin)

   File terpisah karena login.php memakai fondasi berbeda dari home.php:
   - TIDAK memuat custom.min.css
   - memakai components.min.css yang memaksa "border-radius:0 !important"
     ke hampir SEMUA elemen -> itulah penyebab tampilan login terlihat kotak.
     Satu-satunya cara melawannya adalah dengan !important, dibatasi di
     dalam body.login saja supaya tidak bocor ke halaman lain.
   - punya kelas khusus: body.login, .login-form, .forget-form, .register-form

   Struktur HTML dan action semua form TIDAK diubah.
   ========================================================================== */

/* ---- Latar halaman ---- */
body.login{
  /* latar diatur di bagian bawah file (foto masjid + lapisan gelap) */
  font-family: var(--font-sans);
  color: var(--c-text);
  padding: var(--sp-6) var(--sp-4);
  min-height: 100vh;
}

/* Kalau ada foto latar (backstretch), diberi lapisan gelap tipis
   supaya kartu putih tetap menonjol dan teks tetap terbaca. */
/* (lapisan gelap dipindah ke bagian bawah file, memakai body.login::before) */

/* ---- Logo ---- */
body.login .logo{ margin: var(--sp-6) auto var(--sp-5); text-align:center; }
body.login .logo img{
  max-width: 170px; width:100%; height:auto;
  filter: drop-shadow(0 2px 6px rgba(16,24,40,.18));
}

/* ---- Kartu form (resep TailAdmin: rounded-2xl + border + shadow) ---- */
body.login .content{
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-xl);
  width: 420px; max-width: 100%;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
}

/* ---- Judul ---- */
body.login .content h4.form-title{
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  color: var(--g-500);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 2px;
  line-height: 1.5;
}
body.login .content h1.form-title{
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  margin: var(--sp-3) 0 var(--sp-6);
  letter-spacing: -.02em;
  line-height: 1.2;
}
body.login .content h3{
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  margin: 0 0 var(--sp-2);
}
body.login .content p{ font-size: var(--fs-sm); color: var(--g-500); }

/* ---- Kolom isian (resep TailAdmin: h-11, rounded-lg, ring saat fokus) ---- */
body.login .content .form-control{
  height: 44px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-text);
  background: #fff !important;   /* sebelumnya abu kebiruan */
  border: 1px solid var(--c-border-strong) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-xs);
  padding: 10px var(--sp-4);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.login .content .form-control:focus{
  border-color: var(--c-primary-300) !important;
  box-shadow: var(--sh-focus);
  outline: none;
}
body.login .content .form-control::placeholder{ color: var(--g-400); }
body.login .content .form-group{ margin-bottom: var(--sp-4); }

/* Ikon di dalam kolom.
   PENYEBAB ASLI ikon tidak sejajar dengan tulisan:
   components.min.css memposisikan ikon dengan
   ".input-icon>i{ margin:11px 2px 4px 10px; top:0 }" -> jadi menempel ke ATAS,
   bukan di tengah. line-height tidak berpengaruh karena posisinya absolute.
   Solusi: top:0 + bottom:0 + margin:auto -> benar-benar center vertikal. */
body.login .content .input-icon{ position: relative; }
body.login .content .input-icon > i{
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 14px !important;
  right: auto !important;
  margin: auto 0 !important;      /* <- kunci: center vertikal sempurna */
  height: 16px;
  line-height: 16px !important;
  width: 16px !important;
  font-size: 15px !important;
  color: var(--g-400) !important;
  text-align: center;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.login .content .input-icon .form-control{ padding-left: 42px !important; }

/* ---- Captcha ---- */
body.login .content #captcha{ margin-bottom: var(--sp-3); }
body.login .content #captcha img{
  border-radius: var(--r-md) !important;
  border: 1px solid var(--c-border);
  height: 52px !important;
  width: 100% !important;
  object-fit: cover;
  display: block;
  margin: 0 !important;
}
/* Baris captcha: kolom isian + tombol refresh sejajar rapi */
body.login .content .input-icon[style*="flex"]{
  display: flex !important;
  gap: var(--sp-2);
  align-items: center;
}
body.login .content .input-icon[style*="flex"] .form-control{ flex: 1 1 auto; }
/* Tombol refresh captcha: sebelumnya merah besar -> jadi kotak putih rapi */
body.login .content .input-icon[style*="flex"] .btn.green{
  flex: 0 0 44px;
  width: 44px; height: 44px;
  min-height: 44px;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid var(--c-border-strong) !important;
  color: var(--g-500) !important;
  border-radius: var(--r-md) !important;
  float: none !important;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-xs);
}
body.login .content .input-icon[style*="flex"] .btn.green:hover{
  background: var(--g-50) !important; color: var(--c-primary) !important;
}
body.login .content .input-icon[style*="flex"] .btn.green i{ margin: 0; }
/* ikon refresh kiri (yang dobel) disembunyikan supaya tidak membingungkan */
body.login .content .input-icon[style*="flex"] > i.fa-refresh{ display: none; }
body.login .content .input-icon[style*="flex"] .form-control{ padding-left: var(--sp-4); }

/* ---- Tombol ---- */
body.login .content .btn{
  height: 44px;
  min-height: 44px;
  border-radius: var(--r-md) !important;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  border: 1px solid transparent;
  padding: 0 var(--sp-6);
  box-shadow: var(--sh-xs);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.login .content .btn.green{
  background: var(--c-primary); border-color: var(--c-primary); color:#fff;
}
body.login .content .btn.green:hover,
body.login .content .btn.green:focus{
  background: var(--c-primary-600); border-color: var(--c-primary-600); color:#fff;
  box-shadow: var(--sh-md);
}
body.login .content .btn.default{
  background:#fff; border-color: var(--c-border-strong); color: var(--g-700);
}
body.login .content .btn.default:hover{ background: var(--g-50); }

/* Tombol Login dibuat selebar kartu (lebih mudah ditekan, ala TailAdmin) */
body.login .content .login-form .form-actions{
  background: transparent; border: 0; padding: var(--sp-2) 0 0; margin: 0; overflow: hidden;
}
body.login .content .login-form .form-actions .btn.green{
  float: none !important;
  width: 100%;
  display: block;
}

/* ---- Alert ---- */
body.login .content .alert{
  border-radius: var(--r-lg) !important;
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
body.login .content .alert-danger{
  background: var(--c-error-50); border-color: var(--c-error-100); color: var(--c-error-700);
}
body.login .content .alert-success{
  background: var(--c-success-50); border-color: var(--c-success-100); color: var(--c-success-700);
}

/* ---- Bagian bawah ---- */
body.login .content .forget-password{
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}
body.login .content .forget-password h4{
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: var(--c-text); margin-bottom: 2px;
}
body.login .content .forget-password p{ font-size: var(--fs-sm); color: var(--g-500); margin: 0; }
body.login .content a{ color: var(--c-primary); font-weight: var(--fw-med); }
body.login .content a:hover{ color: var(--c-primary-600); }
body.login .content .create-account{ margin-top: var(--sp-3); }

/* ---- Select2 & datepicker di form registrasi ---- */
body.login .content .select2-selection{
  height: 44px !important;
  border: 1px solid var(--c-border-strong) !important;
  border-radius: var(--r-md) !important;
}
body.login .content .select2-selection__rendered{ line-height: 30px !important; font-size: var(--fs-sm); }

/* ---- Copyright ---- */
body.login .copyright{
  text-align:center; color: rgba(255,255,255,.85);
  font-size: var(--fs-xs); margin-top: var(--sp-5);
  text-shadow: 0 1px 3px rgba(16,24,40,.35);
}

/* ---- HP ---- */
@media (max-width: 480px){
  body.login{ padding: var(--sp-4) var(--sp-3); }
  body.login .content{ padding: var(--sp-6) var(--sp-5); border-radius: var(--r-lg) !important; }
  body.login .logo{ margin: var(--sp-4) auto; }
  body.login .logo img{ max-width: 140px; }
  body.login .content h1.form-title{ font-size: 24px; margin-bottom: var(--sp-5); }
  /* 16px mencegah iPhone zoom paksa saat kolom disentuh */
  body.login .content .form-control{ font-size: 16px; }
}

/* Captcha bawaan digambar server dengan latar tosca menyala (library/captcha.php).
   File PHP-nya TIDAK diubah (itu logika, bukan tampilan). Warna mencoloknya
   diredam lewat CSS filter saja: saturasi diturunkan + kontras dinaikkan,
   sehingga hurufnya justru lebih mudah dibaca dan serasi dengan tema. */
body.login .content #captcha img{
  filter: grayscale(.72) saturate(.5) contrast(1.35) brightness(.94);
}

/* --------------------------------------------------------------------------
   QA FASE 3 — sudut membulat pada kartu & modal di halaman login
   -------------------------------------------------------------------------
   PENYEBAB: components.min.css (hanya dimuat di login.php) menulis
     "a, button, code, div, img, input, label, li, p, pre, select, ...
      { border-radius: 0 !important }"
   Aturan itu memakai !important dan mengenai SEMUA <div>, sehingga
   .portlet.light dan .modal-content ikut jadi kotak kaku (0px),
   padahal di halaman modul keduanya sudah membulat dengan benar.

   SOLUSI: lawan seperlunya, DIBATASI di dalam body.login saja.
   -------------------------------------------------------------------------- */
body.login .portlet.light{ border-radius: var(--r-xl) !important; }
body.login .modal-content{ border-radius: var(--r-xl) !important; }
body.login .modal-header{ border-bottom: 1px solid var(--c-border) !important; }
body.login .alert,
body.login .rf-scroll,
body.login .table-scrollable{ border-radius: var(--r-lg) !important; }
body.login .select2-dropdown,
body.login .datepicker{ border-radius: var(--r-lg) !important; }

/* --------------------------------------------------------------------------
   QA FASE 6 — latar halaman login masih abu gelap & kartu menempel ke tepi
   -------------------------------------------------------------------------
   PENYEBAB: assets/pages/css/login-4.min.css (template lama Metronic) menulis
     .login { background-color: #666 !important }
   dan mengatur .login .content dengan gambar latar + lebar tetap 360px.
   Selektor ".login" memakai !important sehingga mengalahkan "body.login",
   akibatnya latar tetap abu gelap dan jarak tepi halaman hilang (padding 0).

   SOLUSI: lawan hanya properti yang bermasalah, dibatasi di halaman login.
   Struktur HTML dan semua form tidak diubah.
   -------------------------------------------------------------------------- */
body.login{
  /* JANGAN diberi latar buram: di belakang body ada foto Masjid 99 Kubah
     Makassar (.backstretch, z-index -999999) bawaan aplikasi. Kalau body
     dibuat buram, fotonya tertutup total. */
  background-color: transparent !important;
  background-image: none !important;
  padding: var(--sp-6) var(--sp-4) !important;
}
/* Lapisan gelap tipis DI ATAS foto.
   Catatan: .backstretch dipasang aplikasi dengan z-index -999999, jadi ia
   berada di belakang latar body. Lapisan gelap TIDAK boleh ditaruh di
   body::before (tidak akan terlihat) -- harus menempel pada .backstretch
   itu sendiri supaya benar-benar menutupi fotonya. */
/* Foto latar diredupkan LANGSUNG pada gambarnya.
   Kenapa bukan lapisan (::after)? Karena aplikasi memberi <img> dan
   pembungkusnya z-index -999999 lewat gaya inline; elemen semu pada
   pembungkus ber-z-index sangat negatif tidak dapat diandalkan untuk
   menutupinya. Filter bekerja langsung pada gambar, jadi pasti terlihat.
   Hasilnya: identitas kampus tetap tampak, kartu login putih tetap
   menonjol, dan tulisan copyright putih tetap terbaca. */
body.login .backstretch img{
  filter: brightness(.42) saturate(.8) !important;
}
body.login .logo,
body.login .content,
body.login .copyright{ position: relative; z-index: 1; }
body.login .content{
  background-image: none !important;
  background-color: #fff !important;
  width: 420px !important;
  max-width: 100% !important;
}
/* teks di dalam kartu sempat dipaksa putih oleh template lama
   (".login .content label, .login .content p { color:#fff }") -> tidak terbaca
   di atas kartu putih. Dikembalikan ke warna teks sistem. */
body.login .content label,
body.login .content p{ color: var(--c-text-muted) !important; }
body.login .content h3,
body.login .content h4{ color: var(--c-text) !important; }

@media (max-width: 480px){
  body.login{ padding: var(--sp-4) var(--sp-3) !important; }
}