@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* BODY */
body {
  background: linear-gradient(135deg, #006cca 0%, #2fa5ff 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* CONTAINER */
.container {
  width: 100%;
  max-width: 450px;
  padding: 20px;
  position:relative;
}

/* ================================================= */
/* ================= LOGIN PAGE ==================== */
/* ================================================= */

.form-box {
  background: rgba(255, 255, 255, 0.25);
  padding: 40px;
  border-radius: 24px;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 20px 35px rgba(0,0,0,0.15);
}

/* LOGIN HEADER → PUTIH */
.form-box header {
  color: #fff;
  font-size: 32px;
  text-align: center;
  margin-bottom: 10px;
  font-weight: 600;
}

.form-box .top span {
  color: #fff;
  text-align: center;
  display: block;
  margin-bottom: 30px;
  opacity: 0.9;
}

/* INPUT LOGIN */
.form-box .input {
  height: 52px;
  width: 100%;
  background: rgba(255,255,255,0.35);
  border: none;
  border-radius: 14px;
  padding: 0 16px;
  font-size: 15px;
  color: #fff;
  outline: none;
}

.form-box .input::placeholder {
  color: #eef;
}

/* ================================================= */
/* ================= MENU PAGE ===================== */
/* ================================================= */

.menu-box {
  background: #ffffff;
  padding: 35px;
  border-radius: 24px;
  box-shadow: 0 25px 45px rgba(0,0,0,0.2);
}

/* MENU HEADER → PUTIH */
.menu-header {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 25px;
}

/* ================================================= */
/* ================= BUTTON ======================== */
/* ================================================= */

.submit {
  height: 56px;
  width: 100%;
  border: none;
  border-radius: 16px;
  background: #fff;
  color: #333;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 15px;
  transition: all 0.25s ease;
}

.submit:hover {
  transform: translateY(-3px);
  background: #06c200;  
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.lanjutkan {
  position: relative;
  height: 56px;
  width: 100%;
  border: none;
  border-radius: 16px;
  background: #fff;
  color: #333;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 15px;
  margin-bottom: 15px;
  transition: all 0.25s ease;
}

.lanjutkan:hover {
  transform: translateY(-3px);
  background: #06c200;  
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* BACK BUTTON */
.btn-back {
  background: rgba(0,0,0,0.07);
  font-size: 15px;
}

/* RESPONSIVE */
@media (max-width: 480px) {
  .form-box,
  .menu-box {
    padding: 25px;
  }
}
/* ===== iOS STYLE (LOGIN) ===== */
.form-box.ios {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 28px;
  padding: 48px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.2),
    inset 0 0 0 1px rgba(255,255,255,0.4);
}

/* Header */
.form-box.ios header {
  font-size: 24px;
  margin-bottom: 18px;
  font-weight: 600;
}

/* Sub text */
.form-box.ios .top span {
  margin-bottom: 42px;
  font-size: 15px;
  opacity: 0.85;
}

/* Input */
.form-box.ios .input {
  height: 58px;
  border-radius: 18px;
  background: rgba(255,255,255,0.35);
  font-size: 16px;
}

/* Button */
.form-box.ios .submit {
  height: 58px;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 600;
}
/* ===== SPACING LOGIN PAGE ===== */

/* Jarak antara judul & subjudul */
.form-box header {
  margin-bottom: 12px;
}

/* Jarak setelah teks "Nama Anda?" */
.form-box .top span {
  margin-bottom: 30px;
}

/* Jarak input ke tombol */
.form-box .input-field {
  margin-bottom: 14px;
}

/* Jarak tombol dari input */
.form-box .submit {
  margin-top: 10px;
}

.input {
  font-size: 16px;
}

@media (max-width: 480px) {
  .form-box.ios {
    padding: 36px;
  }
}


/* ===== Selamat Datang User ===== */
.welcome {
  text-align: center;
  color: #fff;
  margin-bottom: 40px;
}

.welcome .title {
  font-size: 22px;
  font-weight: 600;
}

.welcome .username {
  font-size: 18px;
  font-weight: 700;
  margin-top: 6px;
}

.welcome .subtitle {
  font-size: 10px;
  margin-top: 10px;
  opacity: 0.9;
}

/* ===== LABEL FORM (PUTIH & TEBAL) ===== */
.form-box label {
  display: block;
  color: #fff;        /* PUTIH */
  font-size: 15px;
  font-weight: 600;   /* LEBIH TEBAL */
  margin-bottom: 2px;
}

/* ===== BUTTON GROUP ===== */
.button-group {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

/* ===== BASE BUTTON (reuse dari .submit) ===== */
.submit {
  flex: 1;                     /* tombol sama lebar */
  height: 56px;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* ===== BUTTON BACK ===== */
.btn-back {
  background: #1f6fd1;
  color: #ffffff;
}

.btn-back:hover {
  background: #ff0000;
  transform: translateY(-2px);
}

/* ===== BUTTON PRIMARY / SUBMIT ===== */
.btn-primary {
  background: #ffffff;
  color: #333333;
}

.btn-primary:hover {
  background: #00ff11;
  transform: translateY(-2px);
}

/* ===== DISABLED STATE ===== */
.submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}



/* ===== TEXT AREA ===== */
.textarea {
  resize: vertical;       /* boleh ditarik ke bawah */
  padding-top: 14px;
  line-height: 1.5;
}

.form-group {
  margin-bottom: 16px;  /* ⬅️ sebelumnya biasanya 24–30px */
}


/* ================================================= */
/* ============ DESKTOP RESPONSIVE ================= */
/* ================================================= */

@media (min-width: 768px) {

  /* Container lebih lebar */
  .container {
    max-width: 900px;
  }

  /* Form box lebih lega */
  .form-box,
  .form-box.ios {
    padding: 56px;
    border-radius: 32px;
  }

  /* ===== HEADER ===== */
  .form-box header {
    font-size: 36px;
    margin-bottom: 20px;
  }

  .welcome .title {
    font-size: 34px;
  }

  .welcome .username {
    font-size: 22px;
  }

  .welcome .subtitle {
    font-size: 16px;
  }

  /* ===== LABEL ===== */
  .form-box label {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  /* ===== INPUT BESAR ===== */
  .form-box .input {
    height: 64px;
    font-size: 18px;
    padding: 0 20px;
    border-radius: 18px;
  }

  /* Textarea */
  textarea.input,
  .textarea {
    min-height: 100px;
    font-size: 18px;
    padding: 18px 20px;
  }

  /* ===== SPACING ANTAR FIELD ===== */
  .form-group {
    margin-bottom: 22px;
  }

  /* ===== BUTTON ===== */
  .submit {
    height: 64px;
    font-size: 18px;
    border-radius: 20px;
  }

  .button-group {
    gap: 16px;
    margin-top: 30px;
  }
}
/* ===== FORM ROW (SMR & ODOMETER) ===== */
.form-row {
  display: block; /* default: mobile */
}

/* Desktop: jadi 2 kolom */
@media (min-width: 768px) {
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}
/* ===== CHECKBOX GRID ===== */
.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}

/* Desktop: 2 kolom */
@media (min-width: 768px) {
  .checkbox-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== SCROLLABLE CHECKBOX ===== */
.scroll-box {
  max-height: 220px;          /* tinggi box */
  overflow-y: auto;           /* AKTIFKAN SCROLL */
  padding-right: 6px;
}

/* Scrollbar (Chrome / Edge) */
.scroll-box::-webkit-scrollbar {
  width: 6px;
}

.scroll-box::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.4);
  border-radius: 10px;
}

.scroll-box::-webkit-scrollbar-track {
  background: transparent;
}
/* ===== CHECKBOX 1 KOLOM (SINGLE COLUMN) ===== */
.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr; /* ⬅️ SATU KOLOM */
  gap: 10px;
}

/* ===== TIME ROW ===== */
.time-row {
  display: block; /* mobile default */
}

/* Desktop: 2x2 grid */
@media (min-width: 768px) {
  .time-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* Time input look */
.time-input {
  text-align: center;
  font-size: 18px;
  letter-spacing: 2px;
}

/* Icon time (Chrome) */
.time-input::-webkit-calendar-picker-indicator {
  filter: invert(0.4);
  cursor: pointer;
}

/* Penebal Data Unit*/
.unit-table td:nth-child(1),
.unit-table td:nth-child(2){
font-weight:bold;
}


/* Clear Pencarian */
.search-box{
  position:relative;
}

.search-box .input{
  padding-right:60px;
}

.btn-clear {
  position: absolute;
  right: 15px;       /* Jarak dari tepi kanan input */
  top: 68%;          /* Di tengah secara vertikal */
  transform: translateY(-50%); /* Penyeimbang agar benar-benar di tengah */
  border: none;
  background: transparent;
  cursor: pointer;
  color: #fff;       /* Warna putih agar kontras dengan background biru */
  font-weight: 300;
  font-size: 13px;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 10;       /* Pastikan di atas input */
}


.btn-clear:hover{
  opacity:1;
}

.identity-slot {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
  }

  .identity-slot i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    pointer-events: none;
    z-index: 2;
  }

  /* Ganti .input menjadi .identity-trigger */
  .identity-slot .identity-trigger {
    width: 100%;
    padding: 15px 15px 15px 45px !important;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    border-radius: 15px;
    color: white;
    outline: none;
    font-size: 16px;
    display: block; /* Memastikan elemen mengambil lebar penuh */
  }

  /* Styling placeholder agar tetap terlihat profesional */
  .identity-trigger::placeholder {
    color: rgba(255, 255, 255, 0.7);
  }

  /* Gaya dasar untuk box pesan */
.error-box {
    position: absolute;
    left: 0;
    top: 70%; /* Memaksa muncul tepat di bawah input tanpa menggeser ikon */
    width: 100%;
    
    background-color: #fce4e400;
    color: #cc0000;
    padding: 10px;
    border-radius: 8px;
    margin-top: 5px; /* Jarak kecil dari input */
    z-index: 5;
    box-sizing: border-box;
}

.hidden {
    display: none;
}
/* Logo UT */
.logo{
  width:150px;
  margin:0 auto 25px;
  display:block;
}

.logo-top{
  position:fixed;
  top:20px;
  left:20px;
  width:150px;
  z-index:1000;
}
@media(max-width:480px){
  .logo-top{
    width:150px;
    top:12px;
    left:12px;
  }
}
/* PENENGah COPYRIGHT */
.copyright{
  position:fixed;
  
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  color:#000000;
  opacity:.6;
  font-size:10px;
  font-weight: 600;
}
.logo-bottom{
  display:block;
  width:120px;
  margin:40px auto 1px; /* tengah + jarak ke copyright */
  opacity:0.50;
}
@media(max-width:480px){
  .logo-bottom{
    width:80px;
    
  }
}

/* ERROR FIELD */
.input.error{
  border:2px solid #ff4d4f;
  background:#fff0f0;
}

/* TOAST */
.toast{
  position:absolute;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
  max-width:90%;
  background:#1f2937;
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  font-size:13px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transition:.3s;
  z-index:60;
}


.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}

/* LOADER OVERLAY */
.overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  display:none;              /* <<< INI YANG KURANG */
  align-items:center;
  justify-content:center;
  border-radius:20px;
  z-index:50;
}


.overlay.active{
  display: flex;
}

.loader{
  background: #fff;
  padding: 24px 32px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #111;
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
}