/* ==========================================================
   ScanDoc — mobile-app.css (Tiny Scanner Style Overrides)
   ========================================================== */

/* Pastikan body mengisi seluruh layar, hindari scroll yang tidak perlu */
body.mobile-app {
  margin: 0;
  padding: 0;
  width: 100%;
  position: fixed;
  /* Kunci layout agar tidak tertutup address bar */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background-color: #0c0e1a;
  overflow: hidden;
}

/* TOP BAR (Minimalis) */
.app-header {
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  background: rgba(12, 14, 26, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: env(safe-area-inset-top, 0px) 16px 0 16px;
  flex-shrink: 0;
  z-index: 100;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  flex: 1;
}

.header-title input.editable-title {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  font-family: inherit;
  border-bottom: 1px dashed transparent;
  transition: border 0.2s;
}

.header-title input.editable-title:focus {
  outline: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
}

.btn-icon {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  padding: 8px;
  cursor: pointer;
}

/* MAIN CONTENT AREA */
.app-main {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.center-content {
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* HOME ACTIONS (index.php) */
.home-actions {
  text-align: center;
  width: 100%;
  max-width: 400px;
}

.home-actions h2 {
  font-size: 24px;
  margin-bottom: 8px;
}

.big-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}

.btn-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-big:hover,
.btn-big:active {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.5);
  transform: scale(0.98);
}

.bb-icon {
  font-size: 32px;
}

.bb-label {
  font-size: 18px;
  font-weight: 600;
}

/* FULL SCREEN CAMERA — dipindahkan ke luar main agar benar-benar full */
.camera-fullscreen {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 99999;
  display: flex;
  flex-direction: column;
}

.camera-fullscreen #video-preview {
  flex: 1;
  width: 100%;
  min-height: 0;
  /* penting: agar video bisa mengecil jika ruang terbatas */
  object-fit: cover;
}

.camera-fullscreen .camera-guide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 100px;
  pointer-events: none;
  z-index: 5;
}

.camera-bottom-bar {
  height: 100px;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Tombol Batal */
.cam-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.cam-btn-cancel:active {
  background: rgba(244, 63, 94, 0.3);
  border-color: rgba(244, 63, 94, 0.6);
}

/* Tombol Shutter (bulat besar, sangat jelas) */
.cam-btn-shutter {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
  flex-shrink: 0;
}

.cam-btn-shutter:active {
  transform: scale(0.9);
}

.shutter-inner {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  transition: background 0.15s;
}

.cam-btn-shutter:active .shutter-inner {
  background: #ccc;
}

/* Spacer agar shutter tetap di tengah */
.cam-btn-spacer {
  width: 80px;
}

/* Legacy fallback — tetap pertahankan class lama */
.full-screen-overlay {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 99999;
  display: flex;
  flex-direction: column;
}

.btn-capture-shutter {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid rgba(255, 255, 255, 0.3);
  background-clip: padding-box;
  cursor: pointer;
}

.btn-capture-shutter:active {
  transform: scale(0.95);
}

/* BOTTOM BAR NAVIGATION (Untuk crop.php & editor) */
.bottom-bar {
  height: auto;
  /* PERBAIKAN: Diubah agar fleksibel menyesuaikan tombol di dalamnya */
  min-height: 70px;
  background: rgba(12, 14, 26, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: auto;
  /* Scrollable horizontal */
  scrollbar-width: none;

  /* Tambahan pengaman agar selalu menempel di bawah: */
  position: relative;
  z-index: 100;
}

.bottom-bar::-webkit-scrollbar {
  display: none;
}

.bb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #94a3b8;
  background: transparent;
  border: none;
  padding: 8px 16px;
  min-width: 72px;
  cursor: pointer;
  transition: color 0.2s;
}

.bb-item:active,
.bb-item.active {
  color: #6366f1;
}

.bb-item-icon {
  font-size: 24px;
}

.bb-item-label {
  font-size: 11px;
  font-weight: 500;
}

.bb-item-primary {
  color: #10b981;
}

.bb-item-primary .bb-item-icon {
  background: #10b981;
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* SUB-MENU (Contoh: Pilihan Ukuran Kertas) */
.sub-menu-bar {
  height: 60px;
  background: rgba(17, 19, 39, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}

.sub-menu-bar::-webkit-scrollbar {
  display: none;
}

.sub-item {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 13px;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
}

.sub-item.active {
  border-color: #6366f1;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
}

/* EDITOR AREA (crop.php) */
.editor-workspace {
  flex: 1 1 0%;
  min-height: 0;
  /* KUNCI PENTING: Mencegah flexbox overflow yang mendorong tombol ke bawah */
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 16px;
  /* Memberi ruang bernapas di sekeliling gambar */
}

#crop-container {
  max-width: 100%;
  max-height: 100%;
  position: relative;
  display: inline-block;
  /* Agar container membungkus pas gambar */
}

#crop-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* VIEWER AREA (pdf.php) */
.viewer-workspace {
  flex: 1 1 0%;
  min-height: 0;
  background: transparent;
  padding: 20px;
  margin: 0;
  overflow-y: auto;
}

.pdf-preview-page {
  background: #fff;
  height: 55vh;
  /* PERBAIKAN: Gunakan tinggi layar (55%) sebagai patokan agar gambar mengecil otomatis */
  max-height: 380px;
  aspect-ratio: 1 / 1.414;
  /* A4 ratio otomatis menghitung lebar proporsional */
  margin: 0 auto 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  position: relative;
}

.pdf-preview-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.page-indicator {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  backdrop-filter: blur(4px);
}

/* =====================================================
 FIX PDF BUTTON HIDDEN ON MOBILE
 ScanDoc Patch v16
 ===================================================== */


  /* gunakan viewport modern HP */
  html,
  body.mobile-app {

    height: 100dvh !important;
    min-height: 0 !important;

  }


  /* reset fixed body lama */
  body.mobile-app {

    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }



  /* halaman aplikasi */

  .mobile-app {

    height: 100dvh !important;

    overflow: hidden !important;

  }



  /* HEADER */

  .app-header {

    flex-shrink: 0 !important;

  }



  /* AREA PDF */
  .viewer-workspace {
    flex: 1 1 0% !important; /* Mengisi sisa ruang kosong layar */
    min-height: 0 !important;
    overflow-y: auto !important; /* Izinkan gulir (scroll) */
    padding: 10px 20px !important;
    margin: 0 !important;
    max-width: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Berjajar dari atas, bukan di tengah */
    align-items: center !important;
  }



  .pdf-preview-page {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 auto 20px auto !important; /* Jarak margin antar halaman agar terlihat rapi */
  }

  .pdf-preview-page img {
    height: auto !important;
    max-height: 65vh !important;
    object-fit: contain !important;
    border-radius: 8px; /* Tampilan lebih modern */
  }



  /* BOTTOM BAR SELALU TERLIHAT & MENEMPEL */
  .bottom-bar {
    position: relative !important;
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important; /* Buang background agar menyatu */
    border: none !important; /* Buang garis pemisah */
    padding: 16px !important;
    margin: 0 0 auto 0 !important; /* margin-bottom: auto menahannya di tengah bersama viewer */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999 !important;
  }



  /* tombol simpan */
  #btn-generate {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 56px !important; /* Lebih tebal */
    width: 100% !important;
    max-width: 320px !important;
    border-radius: 28px !important; /* Bentuk pil / bulat */
    box-shadow: 0 8px 24px rgba(99,102,241,0.4) !important; /* Efek melayang */
  }



  /* layar kecil */

  @media(max-height:700px) {
    .viewer-workspace {
      padding: 10px !important;
      justify-content: flex-start !important; /* Jangan ditengah jika layar terlalu pendek */
    }

    .pdf-preview-page img {
      max-height: 55vh !important;
    }

    .bottom-bar {
      min-height: 70px !important;
    }
  }