/* assets/css/display-count.css */

/* Wrapper page */
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  margin: 0;
  padding: 2rem;
  color: #333;
}

.container {
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Title */
.container h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

/* Labels & inputs asas */
label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
  margin-top: 1rem;
}

input[type="text"],
input[type="date"]{
  width: 100%;
  padding: 0.6rem .8rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 1rem;
  margin-bottom: .75rem;
  box-sizing: border-box;
}

/* Grid rows untuk flavour + nilai */
.flavour-group { margin-top: .75rem; }

.flavour-group .row{
  display: grid;
  grid-template-columns: 1fr 160px;   /* kiri nama, kanan dropdown */
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

/* Nama flavour → read-only */
.flavour-group .row .name.ro,
.flavour-group .row input[type="text"][readonly]{
  width: 100%;
  padding: .65rem .8rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f8fafc;
  color: #111827;
  font-weight: 600;
  height: 42px;
}

/* Dropdown angka (0.25 step) */
select.val{
  width: 100%;
  height: 42px;
  padding: 0 .8rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 1rem;
  text-align-last: right;  /* angka ke kanan */
  box-sizing: border-box;
}

/* Submit button */
button#submitBtn {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  padding: .85rem;
  font-size: 1rem;
  font-weight: 700;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .2s ease;
}
button#submitBtn:hover { background-color: #3e8e41; }

/* Feedback */
#responseMsg { margin-top: 1rem; text-align: center; font-weight: bold; }

/* Toast */
#toast {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #4caf50;
  color: white;
  text-align: center;
  border-radius: 12px;
  padding: 1rem;
  position: fixed;
  z-index: 1100;
  left: 50%;
  bottom: 30px;
  font-size: 1rem;
  box-shadow: 0 6px 12px rgba(0,0,0,.2);
  transition: all .3s ease-in-out;
}
#toast.show { visibility: visible; bottom: 50px; opacity: 1; }

/* ===== Preview Modal (popup di atas page) ===== */
#previewPanel{
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(640px, 92vw);
  max-height: 80vh;
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(2, 6, 23, .35);
  padding: 16px;
  z-index: 1001;   /* atas segalanya */
  display: none;   /* JS akan tukar ke block masa preview */
}
/* overlay gelap belakang modal */
#previewPanel::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .45);
  z-index: -1;
}

/* Isi preview */
.list{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.list .hdr{font-weight:700;border-bottom:1px dashed #e5e7eb;padding-bottom:6px;margin-bottom:6px;grid-column:1 / span 2}
.rowline{padding:6px 0;border-bottom:1px dashed #f1f5f9}
.rowline:last-child{border-bottom:none}
.right{text-align:right}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.btn{border:1px solid #e5e7eb;border-radius:10px;padding:10px 14px;background:#fff;cursor:pointer}
.btn.primary{background:#22c55e;color:#fff;border-color:transparent}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* Progress bar */
.progress{height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.bar{height:100%;background:#22c55e}
.bar.indeterminate{position:relative;width:100%;transform:translateX(-100%);animation:dc_indet 1.2s infinite linear}
@keyframes dc_indet{0%{transform:translateX(-100%)}50%{transform:translateX(-10%)}100%{transform:translateX(100%)}}

/* Responsive */
@media (max-width: 520px){
  .flavour-group .row{ grid-template-columns: 1fr 130px; }
}