/*
  CLOUDFARE SAFE PATCH
  File ini dipasang SETELAH stylesheet utama portal.
  Tidak mengubah JavaScript, API, template-download-approved.png, atau slip-template-final.png.
  Landing page #welcomeScreen tidak ditargetkan agar visual existing tetap utuh.
*/

/* ============================================================
   DELES PERSONALIA - TEA GARDEN THEME CLOUDFLARE
   Arah visual: port desain Tea Garden dari Apps Script ke Cloudflare Pages.
   - Landing page sengaja TIDAK disentuh.
   - Halaman internal: hero kebun teh HD di atas.
   - Card form putih/cream besar, dengan kebun teh di bagian bawah.
   - Ornamen daun teh masuk ke dalam card, bukan mengambang di luar.
   - Hanya CSS visual. Tidak mengubah JS/API/form logic, termasuk download bukti dan slip.
   ============================================================ */

:root{
--tea-hero-bg: url("./assets/tea-hero.webp");
  --tea-card-bottom-bg: url("./assets/tea-card-bottom.webp");
  --tea-green: #064c39;
  --tea-green-2: #0b654c;
  --tea-green-3: #0f7a58;
  --tea-cream: #fbf8ef;
  --tea-gold: #caa347;
  --tea-ink: #083f31;
  --tea-leaf-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%23074735' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M42 323C109 258 155 169 183 43'/%3E%3Cpath d='M92 266C58 239 61 199 101 183C121 220 116 248 92 266Z' fill='%230b6a4e' fill-opacity='.22'/%3E%3Cpath d='M135 205C102 176 108 139 149 124C168 160 162 188 135 205Z' fill='%230b6a4e' fill-opacity='.22'/%3E%3Cpath d='M174 143C142 115 150 81 190 66C207 101 200 128 174 143Z' fill='%230b6a4e' fill-opacity='.22'/%3E%3Cpath d='M170 207C197 228 229 224 247 194C219 171 190 178 170 207Z' fill='%23caa347' fill-opacity='.17'/%3E%3Cpath d='M216 143C243 164 276 158 292 127C262 106 234 114 216 143Z' fill='%23074735' fill-opacity='.18'/%3E%3Cpath d='M256 80C282 100 313 94 328 65C300 45 274 54 256 80Z' fill='%23caa347' fill-opacity='.18'/%3E%3C/g%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   INTERNAL PAGE BASE
   ------------------------------------------------------------ */
.portal-screen,
.status-screen,
.dashboard-screen,
.attendance-screen,
.monitor-screen,
.payroll-screen,
.archive-screen,
.period-screen,
.slip-screen{
  position:relative;
  isolation:isolate;
  min-height:100dvh;
  background:
    linear-gradient(180deg, rgba(239,245,237,.88), rgba(246,244,236,.96) 56%, rgba(239,244,237,.98) 100%)!important;
  overflow-x:hidden;
}

/* background halaman cukup tipis. Hero dan card yang menjadi visual utama */
.portal-screen > .app-bg,
.status-screen > .app-bg,
.dashboard-screen > .app-bg,
.attendance-screen > .app-bg,
.monitor-screen > .app-bg,
.payroll-screen > .app-bg,
.archive-screen > .app-bg,
.period-screen > .app-bg,
.slip-screen > .app-bg{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100dvh!important;
  z-index:0!important;
  opacity:1!important;
  background-image:
    radial-gradient(circle at top left, rgba(218,235,224,.48), transparent 34%),
    radial-gradient(circle at bottom right, rgba(201,225,211,.34), transparent 28%),
    linear-gradient(180deg, #f5f8f3 0%, #faf8f1 58%, #f1f6ef 100%)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  filter:none!important;
  transform:none!important;
}

.portal-screen > *:not(.app-bg),
.status-screen > *:not(.app-bg),
.dashboard-screen > *:not(.app-bg),
.attendance-screen > *:not(.app-bg),
.monitor-screen > *:not(.app-bg),
.payroll-screen > *:not(.app-bg),
.archive-screen > *:not(.app-bg),
.period-screen > *:not(.app-bg),
.slip-screen > *:not(.app-bg){
  position:relative;
  z-index:3;
}

/* ------------------------------------------------------------
   HERO / HEADER KEBUN TEH
   Referensi: gambar kebun teh menjadi header lebar, bukan foto landing.
   ------------------------------------------------------------ */
.app-header{
  min-height:190px!important;
  padding:28px 34px!important;
  display:flex!important;
  align-items:flex-start!important;
  border:0!important;
  border-radius:0 0 34px 34px!important;
  overflow:hidden!important;
  background-image:
    linear-gradient(90deg, rgba(251,249,241,.92) 0%, rgba(251,249,241,.68) 40%, rgba(251,249,241,.34) 72%, rgba(251,249,241,.18) 100%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(6,56,41,.04)),
    var(--tea-hero-bg)!important;
  background-size:cover!important;
  background-position:center 50%!important;
  background-repeat:no-repeat!important;
  box-shadow:0 18px 40px rgba(6,42,32,.08)!important;
}

.app-header::after{
  content:"Dari Kebun\A Untuk Cerita\A yang Lebih Baik";
  white-space:pre;
  position:absolute;
  right:7%;
  top:28px;
  text-align:right;
  color:rgba(4,76,57,.87);
  font-family:"Georgia",serif;
  font-style:italic;
  font-size:20px;
  line-height:1.13;
  letter-spacing:.02em;
  transform:rotate(-5deg);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  pointer-events:none;
}

.app-header a,
.app-header button,
.app-header .back-home,
.app-header .home-btn{
  position:relative;
  z-index:3;
}

/* progress seperti referensi: transparan cream tepat di bawah hero */
.progress-shell{
  margin-top:-22px!important;
  padding:28px 28px 22px!important;
  border-radius:0 0 28px 28px!important;
  background:rgba(250,249,242,.88)!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:blur(10px) saturate(110%);
  backdrop-filter:blur(10px) saturate(110%);
}

.progress-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.54));
  pointer-events:none;
  z-index:-1;
}

/* ------------------------------------------------------------
   FORM-STAGE: card putih besar, kebun teh menyembul di bagian bawah
   ------------------------------------------------------------ */
.form-stage{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  margin:18px auto 30px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:34px!important;
  background:
    linear-gradient(180deg,
      rgba(255,253,248,.995) 0%,
      rgba(255,253,248,.992) 56%,
      rgba(255,253,248,.92) 68%,
      rgba(255,253,248,.44) 79%,
      rgba(255,253,248,.14) 100%),
    var(--tea-card-bottom-bg)!important;
  background-size:100% 100%, 100% auto!important;
  background-position:center, center bottom!important;
  background-repeat:no-repeat!important;
  box-shadow:0 24px 54px rgba(6,42,32,.14)!important;
  -webkit-backdrop-filter:blur(7px) saturate(108%);
  backdrop-filter:blur(7px) saturate(108%);
}

/* layer kabut putih agar bagian bawah garden tidak mengganggu tombol */
.form-stage::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:46%;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,253,248,.98) 0%, rgba(255,253,248,.48) 30%, rgba(255,253,248,.07) 64%, rgba(4,76,57,.07) 100%);
}

/* daun pojok kanan atas seperti referensi */
.form-stage::after{
  content:"";
  position:absolute;
  right:-24px;
  top:-10px;
  width:190px;
  height:190px;
  z-index:1;
  pointer-events:none;
  background:var(--tea-leaf-ornament) center/contain no-repeat;
  opacity:.58;
  transform:rotate(18deg);
  filter:drop-shadow(0 12px 22px rgba(6,42,32,.12));
}

.question-panel,
.status-card,
.success-state{
  position:relative!important;
  z-index:3!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* daun kiri kecil di dalam konten */
.question-panel::before,
.status-card::before{
  content:"";
  position:absolute;
  left:-20px;
  top:280px;
  width:120px;
  height:120px;
  background:var(--tea-leaf-ornament) center/contain no-repeat;
  opacity:.30;
  transform:rotate(205deg);
  pointer-events:none;
  z-index:-1;
}

/* quote dekoratif di bawah kanan */
.question-panel::after,
.status-card::after{
  content:"Langkah Kecil\A untuk Operasional\A yang Lebih Kuat";
  white-space:pre;
  position:absolute;
  right:5%;
  bottom:150px;
  z-index:0;
  color:rgba(8,63,49,.50);
  font-family:"Georgia",serif;
  font-style:italic;
  font-size:18px;
  line-height:1.30;
  text-align:right;
  transform:rotate(-4deg);
  pointer-events:none;
}

/* jangan biarkan ornament menutupi input */
.question-panel > *,
.status-card > *,
.success-state > *{
  position:relative;
  z-index:2;
}

.lux-field,
.search-menu,
.review-box,
.pending-card,
.distance-card,
.status-summary,
.status-note,
.status-info{
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(5,76,57,.17)!important;
  box-shadow:0 8px 22px rgba(6,42,32,.05)!important;
}

/* footer tombol tetap clean di dasar card */
.app-footer{
  position:relative!important;
  z-index:5!important;
  margin:0!important;
  padding:18px 22px!important;
  border-top:1px solid rgba(5,76,57,.09)!important;
  background:rgba(255,253,248,.94)!important;
  -webkit-backdrop-filter:blur(12px) saturate(110%);
  backdrop-filter:blur(12px) saturate(110%);
  box-shadow:0 -12px 28px rgba(6,42,32,.08)!important;
}

.app-footer button,
.app-footer .btn-primary{
  border-radius:999px!important;
}

/* screen-level leaf ornaments dimatikan; sekarang daun berada di card */
.portal-screen::before,
.portal-screen::after,
.status-screen::before,
.status-screen::after,
.dashboard-screen::before,
.dashboard-screen::after,
.attendance-screen::before,
.attendance-screen::after,
.monitor-screen::before,
.monitor-screen::after,
.payroll-screen::before,
.payroll-screen::after,
.archive-screen::before,
.archive-screen::after,
.period-screen::before,
.period-screen::after,
.slip-screen::before,
.slip-screen::after{
  content:none!important;
}

/* visual block lama kalau masih ada: pakai kebun teh yang sama */
.visual-bg{
  background-image:var(--tea-hero-bg)!important;
  background-size:cover!important;
  background-position:center 46%!important;
  background-repeat:no-repeat!important;
  filter:saturate(.98) contrast(1.04) brightness(.91)!important;
  transform:none!important;
}
.visual-overlay{
  background:linear-gradient(180deg,rgba(4,46,34,.08),rgba(4,46,34,.34))!important;
}

/* ------------------------------------------------------------
   MOBILE - mendekati screenshot referensi
   ------------------------------------------------------------ */
@media(max-width:920px){
  .app-header{
    min-height:230px!important;
    padding:34px 24px 58px!important;
    border-radius:0 0 26px 26px!important;
    background-image:
      linear-gradient(90deg, rgba(251,249,241,.86) 0%, rgba(251,249,241,.50) 48%, rgba(251,249,241,.12) 100%),
      var(--tea-hero-bg)!important;
    background-position:center 44%!important;
  }

  .app-header::after{
    top:110px;
    right:5%;
    font-size:17px;
  }

  .progress-shell{
    margin-top:-40px!important;
    padding:36px 22px 20px!important;
  }

  .form-stage{
    margin:16px 20px 28px!important;
    min-height:calc(100dvh - 330px)!important;
    border-radius:30px!important;
    background-size:100% 100%, 100% 34%!important;
  }

  .form-stage::after{
    width:155px;
    height:155px;
    right:-34px;
    top:-2px;
  }

  .question-panel::before,
  .status-card::before{
    width:96px;
    height:96px;
    left:-32px;
    top:310px;
    opacity:.28;
  }

  .question-panel::after,
  .status-card::after{
    right:7%;
    bottom:145px;
    font-size:16px;
  }
}

@media(max-width:640px){
.portal-screen,
  .status-screen,
  .dashboard-screen,
  .attendance-screen,
  .monitor-screen,
  .payroll-screen,
  .archive-screen,
  .period-screen,
  .slip-screen{
    background:#eef3ea!important;
  }

  .app-header{
    min-height:250px!important;
    padding:44px 18px 64px!important;
    border-radius:0 0 24px 24px!important;
    background-image:
      linear-gradient(90deg, rgba(251,249,241,.82) 0%, rgba(251,249,241,.44) 50%, rgba(251,249,241,.10) 100%),
      var(--tea-hero-bg)!important;
    background-size:cover!important;
    background-position:center 50%!important;
  }

  .app-header::after{
    top:142px;
    right:5%;
    font-size:15px;
  }

  .progress-shell{
    margin-top:-52px!important;
    padding:42px 20px 18px!important;
    background:rgba(250,249,242,.83)!important;
  }

  .form-stage{
    margin:14px 12px 24px!important;
    min-height:calc(100dvh - 320px)!important;
    border-radius:26px!important;
    background-size:100% 100%, 150% 32%!important;
    background-position:center, center bottom!important;
  }

  .form-stage::before{
    height:43%;
  }

  .form-stage::after{
    width:128px;
    height:128px;
    right:-42px;
    top:2px;
    opacity:.64;
  }

  .question-panel,
  .status-card,
  .success-state{
    padding-left:18px!important;
    padding-right:18px!important;
  }

  .question-panel::before,
  .status-card::before{
    width:78px;
    height:78px;
    left:-30px;
    top:280px;
  }

  .question-panel::after,
  .status-card::after{
    right:6%;
    bottom:128px;
    font-size:14px;
    color:rgba(8,63,49,.46);
  }

  .app-footer{
    margin:0 0 0!important;
    padding:14px 14px 16px!important;
    border-radius:0 0 26px 26px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .visual-bg{transform:none!important}
}


/* ============================================================
   V15 PATCH - HALAMAN STATUS AKHIR
   Fix:
   1) garden image bawah juga muncul pada status-card (halaman akhir)
   2) area/tombol download tidak tertutup stacking/overflow theme
   ============================================================ */

/* Halaman status akhir tidak selalu dibungkus .form-stage,
   jadi garden bawah harus dipasang langsung ke .status-card. */
.status-screen .status-card{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  border-radius:30px!important;
  padding-bottom:clamp(240px,30vw,360px)!important;
  background:
    linear-gradient(180deg,
      rgba(255,253,248,.995) 0%,
      rgba(255,253,248,.99) 58%,
      rgba(255,253,248,.88) 70%,
      rgba(255,253,248,.42) 82%,
      rgba(255,253,248,.08) 100%),
    var(--tea-card-bottom-bg)!important;
  background-size:100% 100%, 145% auto!important;
  background-position:center, center bottom!important;
  background-repeat:no-repeat!important;
  box-shadow:0 22px 48px rgba(6,42,32,.12)!important;
}

/* kabut lembut di batas visual bawah supaya data tetap terbaca */
.status-screen .status-card::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  top:auto!important;
  width:100%!important;
  height:40%!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,
      rgba(255,253,248,.90) 0%,
      rgba(255,253,248,.38) 34%,
      rgba(255,253,248,.06) 68%,
      rgba(4,76,57,.06) 100%)!important;
  opacity:1!important;
  transform:none!important;
}

/* quote tetap ada, tetapi sekarang berada di area garden bawah */
.status-screen .status-card::after{
  content:"Langkah Kecil\A untuk Operasional\A yang Lebih Kuat"!important;
  white-space:pre!important;
  position:absolute!important;
  right:6%!important;
  bottom:54px!important;
  top:auto!important;
  left:auto!important;
  width:auto!important;
  height:auto!important;
  z-index:2!important;
  color:rgba(8,63,49,.58)!important;
  font-family:"Georgia",serif!important;
  font-style:italic!important;
  font-size:17px!important;
  line-height:1.28!important;
  text-align:right!important;
  transform:rotate(-4deg)!important;
  background:none!important;
  pointer-events:none!important;
}

/* semua isi status harus selalu di atas garden */
.status-screen .status-card > *{
  position:relative!important;
  z-index:5!important;
}

/* jangan biarkan container action/download terpotong */
.status-screen .status-actions,
.status-screen .approved-actions,
.status-screen .download-actions,
.status-screen .download-area,
.status-screen .status-download,
.status-screen .result-actions,
.status-screen .action-row,
.status-screen .action-buttons{
  position:relative!important;
  z-index:40!important;
  overflow:visible!important;
  opacity:1!important;
  visibility:visible!important;
}

/* tombol download yang memang sudah dirender oleh logic APPROVED
   jangan dibuat hidden/terkubur oleh theme. Tidak memaksa display,
   sehingga logic pending/reject tetap dihormati. */
.status-screen button[class*="download" i],
.status-screen a[class*="download" i],
.status-screen [id*="download" i],
.status-screen a[download]{
  position:relative!important;
  z-index:50!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  pointer-events:auto!important;
}

/* tombol approved/download dibuat jelas jika menggunakan kelas button umum */
.status-screen .status-actions .btn-primary,
.status-screen .approved-actions .btn-primary,
.status-screen .download-actions .btn-primary,
.status-screen .download-area .btn-primary,
.status-screen .result-actions .btn-primary{
  background:linear-gradient(135deg,#0b7a55,#07523d)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.26)!important;
  box-shadow:0 12px 24px rgba(5,76,57,.20)!important;
}

@media(max-width:640px){
  .status-screen .status-card{
    padding-bottom:230px!important;
    background-size:100% 100%, 180% auto!important;
    background-position:center, 52% bottom!important;
  }

  .status-screen .status-card::after{
    right:7%!important;
    bottom:38px!important;
    font-size:14px!important;
  }
}