/* =====================================================================
   Tema: Apple / iOS style — cream background, kartu putih lembut,
   tombol pill, segmented control, accordion native <details>.
   Font pakai stack sistem Apple supaya di Mac/iOS render SF Pro asli.
   ===================================================================== */
:root{
  --bg: #F6F3EC;
  --surface: #FFFFFF;
  --surface-soft: #EFEAE0;
  --ink: #1C1C1E;
  --muted: #8A8A8E;
  --line: #E7E2D6;
  --accent: #F2762E;           /* ukuran utama / aksi primer */
  --accent-secondary: #0A84FF; /* ukuran pengisi */
  --good: #22A06B;             /* efisiensi & penghematan, waste rendah */
  --warn: #F2762E;             /* waste menengah (dipakai juga utk accent) */
  --danger: #E5484D;           /* waste tinggi */
  --waste: #E3B7A8;            /* fill area sisa di visual blueprint */
  --waste-line: #C98A72;
  --plano-base: #FFFFFF;       /* dasar area plano, netral supaya waste kontras */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html,body{ margin:0; padding:0; max-width:100%; overflow-x:hidden; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ margin:0; font-family: var(--font); }

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; gap:14px;
  padding-top: calc(20px + env(safe-area-inset-top,0px));
  padding-right: calc(20px + env(safe-area-inset-right,0px));
  padding-bottom: 14px;
  padding-left: calc(20px + env(safe-area-inset-left,0px));
  position: sticky; top:0; z-index:10;
  background: rgba(246,243,236,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.topbar__text{ min-width:0; }
.topbar__text h1{ font-size:19px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__text p{ margin:2px 0 0; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__savings{ margin-left:auto; text-align:right; flex:none; }
.topbar__savings-label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.topbar__savings-value{ display:block; font-size:16px; font-weight:700; color:var(--good); }

/* ---------- Layout ---------- */
.layout{
  display:grid;
  grid-template-columns: 380px 1fr;
  gap: 16px;
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
  align-items:start;
}
@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr; padding:12px; gap:12px; }
}
.col{ display:flex; flex-direction:column; gap:14px; min-width:0; }

/* ---------- Panels (cards) ---------- */
.panel{
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(28,28,30,.04), 0 8px 24px rgba(28,28,30,.045);
  overflow: hidden;
  min-width: 0;
}
.panel__head{
  display:flex; gap:12px; align-items:center;
  padding: 18px 18px;
  cursor: pointer;
  list-style: none;
}
.panel__head::-webkit-details-marker{ display:none; }
.panel__head--split{ justify-content:space-between; cursor:default; }
.panel__head h2{ font-size:15.5px; font-weight:700; }
.panel__hint{ margin:3px 0 0; font-size:12px; color:var(--muted); }
.panel__body{ padding: 0 18px 20px; }
.panel--static .panel__head{ cursor:default; }

.chevron{
  margin-left:auto; width:9px; height:9px; flex:none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .2s ease;
}
details[open] > .panel__head .chevron{ transform: rotate(45deg); }

/* ---------- Fields ---------- */
.field{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--muted); margin-bottom:12px; font-weight:500; min-width:0; }
.field input, .field select{
  font-family: var(--font);
  font-size: 15px;
  padding: 11px 13px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.field select{
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field input:focus, .field select:focus{ outline: 2px solid var(--accent); outline-offset:1px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; min-width:0; }

.paper-summary{
  background: var(--surface-soft); border-radius: var(--radius-md);
  padding: 12px 14px; font-size: 13px; margin-bottom:12px;
}
.paper-summary strong{ display:block; font-size:14px; margin-bottom:2px; }
.paper-summary span{ color:var(--muted); }

/* ---------- Buttons ---------- */
.btn{
  font-family: var(--font); font-weight:600; font-size:14.5px;
  padding: 13px 18px; border-radius: var(--radius-pill); border: none;
  cursor:pointer; transition: transform .06s ease, opacity .15s ease;
}
.btn:active{ transform: scale(.97); }
.btn--primary{ background: var(--ink); color:#fff; width:100%; }
.btn--soft{ background: var(--surface-soft); color: var(--ink); width:100%; }
.btn--small{ padding:10px 16px; font-size:13px; }

/* ---------- Ukuran target rows ---------- */
.size-row{
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 12px 12px 2px; margin-bottom: 10px; position:relative;
}
.size-row__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.size-row__tag{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color: var(--muted);
}
.size-row__remove{
  background: var(--surface-soft); border:none; color: var(--ink); font-size:13px; cursor:pointer;
  width:22px; height:22px; border-radius:50%; line-height:1;
}
.size-row .field{ margin-bottom:10px; }
.sz-manual{ margin-top:2px; }

/* ---------- Segmented control ---------- */
.segmented{
  display:flex; background: var(--surface-soft); border-radius: var(--radius-pill);
  padding:3px; flex:none;
}
.segmented__btn{
  font-family: var(--font); font-size:12.5px; font-weight:600; padding:7px 14px;
  border:none; background:transparent; color: var(--ink); cursor:pointer; border-radius: var(--radius-pill);
}
.segmented__btn.is-active{ background: var(--ink); color:#fff; }

/* ---------- Stats ---------- */
.stats{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin-bottom:16px;
}
@media (min-width: 520px){ .stats{ grid-template-columns: repeat(3, 1fr); } }
.stat{ background: var(--surface-soft); border-radius: var(--radius-md); padding:12px 14px; }
.stat__label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.stat__value{ font-size:19px; font-weight:700; margin-top:4px; }
.stat__value.good{ color: var(--good); }
.stat__value.warn{ color: var(--accent); }

/* ---------- Waste bar (persentase, warna dinamis) ---------- */
.waste-bar{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.waste-bar__label{ font-size:13px; font-weight:600; color: var(--ink); flex:none; }
.waste-bar__track{ flex:1; height:8px; border-radius: var(--radius-pill); background: var(--surface-soft); overflow:hidden; }
.waste-bar__fill{ height:100%; border-radius: var(--radius-pill); transition: width .35s ease, background-color .35s ease; }
.waste-bar__value{ font-size:14.5px; font-weight:700; flex:none; min-width:52px; text-align:right; }

.breakdown{ display:flex; flex-direction:column; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.breakdown__item{
  font-size:13px; font-weight:500;
  display:flex; gap:8px; align-items:center;
}
.breakdown__item strong{ margin-left:auto; font-size:13.5px; }
.breakdown__dot{ width:10px; height:10px; border-radius:4px; flex:none; }

/* ---------- Blueprint visual ---------- */
.blueprint-wrap{
  border-radius: var(--radius-md); padding:12px; background: var(--surface-soft); margin-bottom:16px;
}
.blueprint-wrap svg{ width:100%; height:auto; display:block; }

.save-status{ font-size:12.5px; color: var(--good); min-height:16px; margin:10px 0 0; text-align:center; font-weight:600; }

/* ---------- History ---------- */
.history-list{ display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto; }
.empty-note{ color:var(--muted); font-size:13px; }
.history-item{
  background: var(--surface-soft); border-radius: var(--radius-md); padding:11px 13px;
  display:flex; justify-content:space-between; align-items:center; font-size:12.5px;
}
.history-item__meta{ color:var(--muted); }
.history-item__save{ color: var(--good); font-weight:700; }
.history-item__del{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; margin-left:10px; }

/* ---------- Modal ---------- */
.modal{
  position:fixed; inset:0; background: rgba(28,28,30,.5);
  display:flex; align-items:center; justify-content:center; padding:16px; z-index:50;
}
.modal[hidden]{ display:none; }
.modal__card{
  background: var(--bg); border-radius: var(--radius-lg); width:min(680px, 100%);
  max-height:88vh; overflow-y:auto; padding:22px;
}
.modal__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal__close{ background: var(--surface-soft); border:none; width:28px; height:28px; border-radius:50%; font-size:14px; cursor:pointer; color:var(--muted); }
.paper-form{ background:var(--surface); border-radius: var(--radius-md); padding:16px; margin-bottom:16px; }
.paper-table-wrap{ overflow-x:auto; background:var(--surface); border-radius: var(--radius-md); padding:6px 14px; }
.paper-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.paper-table th, .paper-table td{ text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.paper-table th{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.paper-table td.actions button{ background:none; border:none; cursor:pointer; color: var(--accent); font-size:12px; margin-right:8px; font-weight:600; }
.tag-default{ font-size:10px; color:var(--muted); background: var(--surface-soft); border-radius:6px; padding:2px 6px; }