:root{
  --orange:      #F5A94D;
  --orange-dark: #E8963A;
  --yellow:      #F0E45A;
  --yellow-dark: #E6D842;
  --green:       #7FC46B;
  --green-dark:  #66A852;
  --plus-green:  #6FA84A;
  --minus-orange:#F5A94D;
  --minus-yellow:#F5F08A;
  --minus-green: #A6D89A;
  --ink:         #262421;
  --card-bg:     #FFFFFF;
  --page-bg:     #EDEFF2;
  --border:      #1f1f1f;
  --radius-lg:   16px;
  --radius-md:   12px;
  --radius-sm:   10px;
}

*{ box-sizing: border-box; }

[hidden]{
  display:none !important;
}

html, body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow-x:hidden;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--page-bg);
  color:var(--ink);
  -webkit-tap-highlight-color: transparent;
}

button{
  font-family: inherit;
  border:none;
  cursor:pointer;
  color:var(--ink);
  -webkit-user-select:none;
  user-select:none;
  touch-action: manipulation;
}
button:active{ filter:brightness(0.94); }

input{
  font-family:inherit;
  touch-action: manipulation;
}

.app{
  height:100vh;
  height:100dvh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(6px, 1.6dvh, 18px) 12px;
  overflow:hidden;
}

#adminScreen{
  overflow:auto;
  align-items:flex-start;
}

/* ============== KASIR CARD ============== */
.phone-card{
  width:100%;
  max-width:430px;
  max-height:100%;
  background:var(--card-bg);
  border:2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(10px, 2.2dvh, 18px) clamp(10px, 3vw, 16px) clamp(12px, 2.6dvh, 22px);
  display:flex;
  flex-direction:column;
  gap: clamp(6px, 1.8dvh, 16px);
  overflow:hidden;
}

.topbar{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size: clamp(11px, 2.2dvh, 15px);
  font-weight:600;
}

.topbar-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}

#kasirNameLabel{
  color:#a3591b;
}

#btnLogoutKasir{
  background:#e4e4e4;
  color:var(--ink);
  font-size: clamp(10px, 1.8dvh, 12px);
  font-weight:600;
  padding:4px 10px;
  border-radius: 8px;
}

/* product columns */
.products{
  display:flex;
  gap: clamp(6px, 1.6vw, 10px);
}

.product-col{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: clamp(4px, 1dvh, 8px);
}

.qty-badge{
  height: clamp(28px, 5.4dvh, 46px);
  border-radius: var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: clamp(15px, 2.8dvh, 26px);
  font-weight:700;
}

.product-box{
  height: clamp(56px, 12.5dvh, 120px);
  border-radius: var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: clamp(14px, 2.8dvh, 24px);
  font-weight:700;
  padding:0 4px;
  width:100%;
  text-align:center;
  line-height:1.15;
  white-space:nowrap;
}

.op-btn{
  width:100%;
  height: clamp(28px, 5.4dvh, 46px);
  border-radius: var(--radius-sm);
  font-size: clamp(16px, 3dvh, 28px);
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.orange{ background:var(--orange); }
.yellow{ background:var(--yellow); }
.green{  background:var(--green); }

.plus{ background:var(--plus-green); color:#fff; }
.orange-min{ background:var(--minus-orange); }
.yellow-min{ background:var(--minus-yellow); }
.green-min{  background:var(--minus-green); }

/* payment grid */
.payment-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 1.4dvh, 12px);
}

.pay-btn{
  background:var(--orange);
  height: clamp(36px, 6.8dvh, 60px);
  border-radius: var(--radius-md);
  font-size: clamp(12px, 2.4dvh, 19px);
  font-weight:600;
}

.pay-btn.wide{
  grid-column: 1 / -1;
}

.pay-btn.qris-btn{
  background:#4A90E2;
  color:#fff;
}

.cash-total-hint{
  margin:-6px 0 0;
  font-size:14px;
  font-weight:600;
  color:#555;
  text-align:center;
}

.pay-btn.active-pay{
  box-shadow: 0 0 0 3px #4a90e2 inset;
}

/* summary */
.summary{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size: clamp(13px, 2.4dvh, 20px);
  font-weight:600;
}

.summary-row{
  display:flex;
  gap:8px;
}

.summary-label{ width: 5.5em; flex:none; }
.summary-colon{ flex:none; }

#kembalianValue.warn{ color:#c0392b; }

/* OK button */
.ok-btn{
  width:100%;
  height: clamp(48px, 9dvh, 78px);
  background:var(--orange);
  border-radius: var(--radius-lg);
  font-size: clamp(18px, 3.6dvh, 30px);
  font-weight:700;
}

/* ============== LOGIN SCREEN ============== */
.login-card{
  width:100%;
  max-width:340px;
  border:2px solid var(--border);
}

/* ============== MODAL (admin login) ============== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:50;
}

.modal-box{
  background:#fff;
  border-radius:14px;
  padding:24px 20px;
  width:100%;
  max-width:340px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.modal-box h2{
  margin:0 0 4px;
  font-size:20px;
  text-align:center;
}

.modal-box label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:14px;
  font-weight:600;
  color:#444;
}

.modal-box input{
  height:42px;
  border-radius:8px;
  border:1.5px solid #ccc;
  padding:0 12px;
  font-size:16px;
}

.login-error{
  color:#c0392b;
  font-size:13px;
  margin:0;
  text-align:center;
}

.modal-actions{
  display:flex;
  gap:10px;
  margin-top:4px;
}

.btn-primary, .btn-secondary{
  flex:1;
  height:44px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
}

.btn-primary{
  background:var(--orange);
  color:var(--ink);
}

.btn-secondary{
  background:#e4e4e4;
  color:var(--ink);
}

/* ============== ADMIN PANEL ============== */
.admin-card{
  width:100%;
  max-width:480px;
  background:var(--card-bg);
  border:2px solid var(--border);
  border-radius: var(--radius-lg);
  padding:18px 16px 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  max-height:92vh;
  max-height:92dvh;
  overflow-y:auto;
}

.admin-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.admin-topbar h2{
  margin:0;
  font-size:20px;
}

.admin-topbar .btn-secondary{
  flex:none;
  padding:0 16px;
  width:auto;
}

.grand-total-box{
  background:#FBEFDC;
  border:1.5px solid var(--orange-dark);
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:600;
  flex-wrap:wrap;
}

.grand-total-box strong{
  font-size:18px;
  color:#a3591b;
}

.months-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.month-block{
  border:1.5px solid #d8d8d8;
  border-radius:10px;
  overflow:hidden;
}

.month-header{
  width:100%;
  background:#F7F7F5;
  padding:14px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:15px;
  font-weight:700;
  gap:8px;
}

.month-header .arrow{
  transition:transform .15s ease;
  flex:none;
}

.month-header.open .arrow{
  transform:rotate(180deg);
}

.month-body{
  display:none;
  padding:6px 14px 12px;
}

.month-body.open{ display:block; }

.order-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:4px 10px;
  padding:9px 0;
  font-size:13px;
  border-bottom:1px solid #eee;
}

.order-row:last-child{ border-bottom:none; }

.order-date{
  flex:1 1 100%;
  font-weight:600;
  color:#444;
}

.order-items{
  color:#555;
  white-space:nowrap;
}

.order-total{
  font-weight:700;
}

.order-kasir{
  font-weight:700;
  color:#a3591b;
  background:#FBEFDC;
  border-radius:6px;
  padding:2px 8px;
  margin-left:auto;
  white-space:nowrap;
}

.payment-tag{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  padding:2px 9px;
  border-radius:999px;
  border:1.5px solid;
  margin-left:8px;
  vertical-align:middle;
}

.payment-tag.cash{
  color:#a3591b;
  border-color:var(--orange-dark);
  background:#FBEFDC;
}

.payment-tag.qris{
  color:#1d5fc9;
  border-color:#4A90E2;
  background:#E8F1FD;
}

.empty-note{
  text-align:center;
  color:#888;
  font-size:14px;
  padding:20px 0;
}

/* ============== very short screens (landscape phones etc.) ============== */
@media (max-height: 480px){
  .products{ gap:4px; }
  .product-col{ gap:3px; }
}