/* ==========================================================================
   login.css — Halaman login peserta USM
   --------------------------------------------------------------------------
   Dimuat HANYA dari application/views/ujian/welcome_view.php, jadi aman
   menyentuh .main-header / .main-footer / body: tidak bocor ke halaman lain.

   Tata letak seperti CBT (sambutan + kartu login, banner di bawahnya),
   warna & font seperti PSB Online. Acuan: DESAIN.md §5.1, §5.9, §5.12, §6.1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kanvas halaman
   -------------------------------------------------------------------------- */

body.skin-red {
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* AdminLTE memberi .wrapper latar gelap (#222d32) dan .content-wrapper abu. */
.skin-red .wrapper {
  background: var(--bg);
}

.skin-red .content-wrapper {
  background: transparent;
  min-height: auto;
}

/* --------------------------------------------------------------------------
   2. Bar atas — putih, garis tipis (tanpa garis aksen merah CBT)
   -------------------------------------------------------------------------- */

.skin-red .main-header {
  position: relative;
  max-height: none;
  border-bottom: 1px solid var(--border);
}

.skin-red .main-header .navbar {
  min-height: var(--h-header);
  background: var(--surface);
  border: 0;
  box-shadow: none;
}

/* Logo dan jam tetap satu baris di semua lebar layar */
.skin-red .main-header .navbar > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--h-header);
}

.skin-red .main-header .navbar > .container::before,
.skin-red .main-header .navbar > .container::after {
  display: none;   /* clearfix Bootstrap ikut jadi item flex */
}

.skin-red .main-header .navbar-header,
.skin-red .main-header .navbar-custom-menu {
  float: none;
  margin: 0;
}

/* Logo: emblem + dua baris teks, pola komponen logo PSB Online */
.skin-red .main-header .navbar-brand.cbt-logo {
  float: none;
  height: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text);
}

.cbt-logo > img {
  width: 36px;
  height: 36px;
  flex: none;
}

.cbt-logo__teks {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.cbt-logo__teks b {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}

.cbt-logo__teks small {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}

.skin-red .main-header .navbar-custom-menu .nav {
  margin: 0;
}

/* Jam server → chip angka tabular */
.skin-red .main-header .navbar-custom-menu .nav > li > a {
  padding: 8px 14px;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-muted);
  background: var(--surface-raised);
  border-radius: var(--r-pill);
}

.skin-red .main-header .navbar-custom-menu .nav > li > a:hover,
.skin-red .main-header .navbar-custom-menu .nav > li > a:focus {
  background: var(--surface-raised);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   3. Tata letak
   -------------------------------------------------------------------------- */

.cbt-login {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-7);
}

/* --------------------------------------------------------------------------
   4. Hero hijau hutan (DESAIN.md §6.1 butir 2)
   -------------------------------------------------------------------------- */

.cbt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-7);
  background: var(--hutan-900);
  border-radius: var(--r-xl);
  color: var(--putih);
}

.cbt-login__intro,
.cbt-login__auth {
  min-width: 0;
}

.cbt-hero__eyebrow {
  margin: 0 0 var(--sp-4);
  color: var(--mint-300);
}

.cbt-hero__title {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--putih);
}

.cbt-hero__lead {
  margin: 0;
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--kabut);
}

.cbt-hero__lead .u-nums {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--mint-300);
}

/* Langkah 01 / 02 / 03 — kartu bernomor di latar gelap (DESAIN.md §5.3) */
.cbt-steps {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.cbt-steps li {
  padding: var(--sp-4);
  background: var(--hutan-800);
  border: 1px solid var(--hutan-700);
  border-radius: var(--r-md);
}

.cbt-steps b {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  color: var(--mint-300);
}

.cbt-steps span {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--putih);
}

/* --------------------------------------------------------------------------
   5. Kartu login
   -------------------------------------------------------------------------- */

.cbt-card {
  padding: var(--sp-6);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  color: var(--text);
}

.cbt-card__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}

.cbt-card__hint {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Form ----------------------------------------------------------------- */

/* .form-horizontal memberi margin negatif pada .form-group */
.cbt-login .form-horizontal .form-group {
  margin: 0 0 var(--sp-4);
}

.cbt-login label.cbt-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.cbt-login .form-control {
  height: var(--h-peserta);
  padding: 0 42px 0 var(--sp-4);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--r-sm);
  box-shadow: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.cbt-login .form-control::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.cbt-login .form-control:focus {
  /* !important: menimpa .form-control:focus { border-color: #3c8dbc !important } AdminLTE */
  border-color: var(--hutan-600) !important;
  box-shadow: 0 0 0 1px var(--hutan-600), 0 0 0 4px var(--mint-100);
  outline: none;
}

/* Ikon bawaan Bootstrap dijangkarkan ke bawah (input elemen terakhir di
   .form-group) supaya selalu di tengah kotak input, bukan di baris label. */
.cbt-login .has-feedback .form-control-feedback {
  top: auto;
  bottom: 0;
  width: 42px;
  height: var(--h-peserta);
  line-height: var(--h-peserta);
  font-size: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Tampilkan password — kotak iCheck digambar ulang dengan token.
   Plugin iCheck tetap dipakai karena JS halaman mendengarkan 'ifChanged'. */
.cbt-login .cbt-showpass {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.cbt-login .cbt-showpass label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 24px;
  padding-left: 0;
  font-weight: 500;
  cursor: pointer;
}

.cbt-login .cbt-showpass .icheckbox_square-blue {
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  background: var(--surface);   /* menggantikan sprite biru iCheck */
  border: 1.5px solid var(--abu);
  border-radius: 6px;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.cbt-login .cbt-showpass .icheckbox_square-blue.hover {
  border-color: var(--hutan-600);
}

.cbt-login .cbt-showpass .icheckbox_square-blue.checked {
  background: var(--hutan-600);
  border-color: var(--hutan-600);
}

.cbt-login .cbt-showpass .icheckbox_square-blue.checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--putih);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cbt-login .cbt-showpass .icheckbox_square-blue.focus {
  box-shadow: 0 0 0 3px var(--mint-100);
}

/* Tombol utama --------------------------------------------------------- */

.cbt-login .btn-primary {
  height: var(--h-peserta);
  padding: 0 var(--sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--on-color);
  background: var(--hutan-600);
  border: 1px solid var(--hutan-600);
  border-radius: var(--r-md);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.cbt-login .btn-primary:hover,
.cbt-login .btn-primary:focus,
.cbt-login .btn-primary:active {
  background: var(--hutan-700);
  border-color: var(--hutan-700);
  color: var(--on-color);
}

.cbt-login .btn-primary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Panah bergeser 4 px saat hover (DESAIN.md §5.1) */
.cbt-login .cbt-panah {
  display: inline-block;
  transition: transform var(--t-fast);
}

.cbt-login .btn-primary:hover .cbt-panah {
  transform: translateX(4px);
}

/* Pesan dari pesan_err() / pesan_succ() --------------------------------
   Markup dibuat app.js: <div class="alert alert-warning alert-dismissable">…
   AdminLTE memberi warna latar alert dengan !important, jadi ditimpa
   dengan !important juga. */

.cbt-login #form-pesan .alert {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.5;
  border-radius: var(--r-sm);
}

.cbt-login #form-pesan .alert-warning {
  background: var(--bahaya-tint) !important;   /* menimpa !important AdminLTE */
  border: 1px solid var(--bahaya) !important;
  color: var(--tinta) !important;
}

.cbt-login #form-pesan .alert-info {
  background: var(--info-tint) !important;     /* menimpa !important AdminLTE */
  border: 1px solid var(--info) !important;
  color: var(--tinta) !important;
}

.cbt-login #form-pesan .alert h4 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: inherit;
}

.cbt-login #form-pesan .alert .close {
  color: inherit;
  opacity: .6;
  text-shadow: none;
}

.cbt-login #form-pesan .alert .close:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   6. Banner (DESAIN.md §5.12) — carousel Bootstrap bawaan
   -------------------------------------------------------------------------- */

.cbt-banner {
  margin-top: var(--sp-6);
  overflow: hidden;            /* memotong sudut gambar */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}

/* Gambar ditampilkan utuh (tidak di-crop) karena banner USM berisi teks. */
.cbt-banner .carousel-inner > .item > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Banner bertautan: seluruh gambar bisa diklik, fokus terlihat */
.cbt-banner .item > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.cbt-banner .item > a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

/* Judul & keterangan sebagai strip di bawah gambar — tidak menimpa gambar,
   karena banner USM biasanya sudah berisi teks di dalam gambarnya. */
.cbt-banner__teks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-5);
  background: var(--hutan-900);
}

.cbt-banner__teks b {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--putih);
}

.cbt-banner__teks span {
  font-size: var(--fs-sm);
  color: var(--kabut);
}

/* Indikator slider di tepi atas gambar supaya tidak menimpa strip teks */
.cbt-banner .carousel-indicators {
  top: var(--sp-3);
  bottom: auto;
  margin-bottom: 0;
}

.cbt-banner .carousel-control {
  width: 64px;
  background: none;
  filter: none;
  opacity: 1;
  text-shadow: none;
}

.cbt-banner .carousel-control .glyphicon {
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  line-height: 44px;
  font-size: 14px;
  color: var(--hutan-900);
  background: var(--putih-90);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}

.cbt-banner .carousel-indicators li {
  width: 8px;
  height: 8px;
  margin: 0 3px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--kabut);
}

.cbt-banner .carousel-indicators li.active {
  width: 24px;
  height: 8px;
  margin: 0 3px;
  background: var(--mint-300);
}

/* --------------------------------------------------------------------------
   7. Footer gelap (DESAIN.md §6.1 butir 4)
   -------------------------------------------------------------------------- */

.skin-red .main-footer {
  padding: var(--sp-5) var(--sp-4);
  background: var(--hutan-950);
  border-top: 0;
  color: var(--kabut);
  font-size: var(--fs-sm);
}

.skin-red .main-footer a {
  color: var(--mint-300);
  font-weight: 600;
}

.skin-red .main-footer a:hover,
.skin-red .main-footer a:focus {
  color: var(--putih);
}

/* --------------------------------------------------------------------------
   8. Layar sedang & kecil
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .cbt-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    padding: var(--sp-6);
  }

  /* Kartu login didahulukan — calon siswa datang untuk masuk, bukan membaca */
  .cbt-login__auth  { order: 1; }
  .cbt-login__intro { order: 2; }
}

@media (max-width: 767px) {
  .skin-red .main-header .navbar-custom-menu .nav > li > a {
    padding: 7px 12px;
    font-size: var(--fs-xs);
  }

  .cbt-login {
    padding: var(--sp-4) var(--sp-4) var(--sp-6);
  }

  .cbt-hero {
    padding: var(--sp-4);
    border-radius: var(--r-lg);
  }

  .cbt-card {
    padding: var(--sp-5);
  }

  .cbt-steps {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--sp-5);
  }

  .cbt-banner {
    border-radius: var(--r-lg);
  }
}