:root{
  --bg:#F2EEE2; --card:#FFFFFF; --sidebar:#1E2B22; --sidebar-soft:#2A3A2F;
  --accent:#DD6B35; --accent-dark:#C2551F; --accent-soft:#FBE9DD;
  --text:#202822; --text-muted:#767F73; --border:#E5DFCF;
  --green-soft:#E1F2E4; --green-text:#2F6B45;
  --red-soft:#FBEAE8; --red-text:#B5432E;
  --amber-soft:#FBF0DC; --amber-text:#9A6B15;
  --navy:#1F3B57;
  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-display); -webkit-font-smoothing:antialiased; }
.app{ max-width:1360px; margin:0 auto; padding-bottom:60px; }

.topbar{
  background:var(--sidebar); color:#fff; padding:18px 26px; border-radius:0 0 20px 20px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:38px; height:38px; border-radius:10px; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand-mark svg{ width:19px; height:19px; }
.brand-text h1{ margin:0; font-size:16.5px; font-weight:800; letter-spacing:-0.01em; }
.brand-text p{ margin:1px 0 0; font-size:11.5px; color:#A9B3A6; }
.tabs{ display:flex; gap:6px; background:var(--sidebar-soft); padding:4px; border-radius:11px; }
.tab-btn{
  border:none; background:transparent; color:#B7C0B4; font-family:var(--font-display);
  font-weight:700; font-size:12.5px; padding:8px 14px; border-radius:8px; cursor:pointer;
  text-decoration:none; display:inline-block;
}
.tab-btn.active{ background:var(--accent); color:#fff; }

.content{ padding:16px 26px 0; }

.alert-success{
  background:var(--green-soft); color:var(--green-text); border:1px solid #BFE3C7;
  border-radius:10px; padding:10px 14px; font-size:12.5px; margin-bottom:16px; font-weight:600;
}

.panel{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; margin-bottom:18px; }
.panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.panel-head h2{ margin:0; font-size:15px; font-weight:800; }
.panel-head p{ margin:2px 0 0; font-size:12px; color:var(--text-muted); }
.panel-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0; padding:0; border:none; }

.btn{ border:none; border-radius:9px; padding:9px 14px; font-family:var(--font-display); font-weight:600; font-size:12.5px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-ghost{ background:var(--bg); color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover{ background:#EAE4D3; }
.btn-danger{ background:var(--red-soft); color:var(--red-text); }
.btn-danger:hover{ background:#F6D9D6; }
.btn-icon{ padding:6px 8px; }

.date-input, .text-input, .num-input, .select-input{
  border:1px solid var(--border); border-radius:8px; padding:8px 9px; font-family:var(--font-mono); font-size:12.5px; background:#fff; color:var(--text);
}

/* Stat cards */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
@media (max-width:800px){ .stat-grid{ grid-template-columns:1fr 1fr; } }
.stat-card{ border:1px solid var(--border); border-radius:12px; padding:13px 14px; background:var(--card); }
.stat-icon{ width:26px; height:26px; border-radius:8px; background:var(--accent-soft); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.stat-icon svg{ width:14px; height:14px; }
.stat-value{ font-family:var(--font-mono); font-weight:700; font-size:18px; }
.stat-label{ font-size:11px; color:var(--text-muted); margin-top:2px; }

/* Table */
.table-scroll{ overflow-x:auto; }
table.data-table{ border-collapse:separate; border-spacing:0; width:100%; min-width:560px; font-size:12.5px; }
table.data-table th, table.data-table td{ padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
table.data-table thead tr.grp-row th{ text-align:center; font-size:11.5px; font-weight:800; padding:8px 10px; border-bottom:1px solid #fff; }
table.data-table thead tr.sub-row th{ text-align:right; font-size:10.5px; color:var(--text-muted); font-weight:700; background:#FAF8F1; }
table.data-table thead tr.sub-row th:first-child, table.data-table thead tr.grp-row th:first-child{ text-align:left; }
table.data-table td{ font-family:var(--font-mono); text-align:right; }
table.data-table td:first-child, table.data-table td.left{ text-align:left; font-family:var(--font-display); }
table.data-table tbody tr:hover td{ background:#FBF9F3; }
table.data-table tfoot td{ font-weight:800; border-top:2px solid var(--text); border-bottom:none; background:#FAF8F1; }
.cell-input{ width:82px; border:1px solid var(--border); border-radius:6px; padding:5px 6px; font-family:var(--font-mono); font-size:12px; text-align:right; }
.cell-input:focus{ outline:2px solid var(--accent); border-color:var(--accent); }
.cell-static{ color:var(--text-muted); }
.pill{ display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; }
.pill-green{ background:var(--green-soft); color:var(--green-text); }
.pill-amber{ background:var(--amber-soft); color:var(--amber-text); }
.pill-red{ background:var(--red-soft); color:var(--red-text); }
.row-del{ background:transparent; border:none; color:var(--text-muted); cursor:pointer; font-size:15px; padding:2px 8px; border-radius:6px; }
.row-del:hover{ background:var(--red-soft); color:var(--red-text); }
.add-date-row{ display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap; }

/* Charts */
.charts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
@media (max-width:900px){ .charts-grid{ grid-template-columns:1fr; } }
.chart-panel{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; }
.chart-panel h3{ margin:0 0 6px; font-size:14px; font-weight:800; text-align:center; }
.chart-scroll{ overflow-x:auto; }
.chart-legend{ display:flex; justify-content:center; gap:16px; margin-top:6px; font-size:11.5px; color:var(--text-muted); }
.legend-dot{ width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:5px; vertical-align:middle; }
.chart-empty{ text-align:center; color:var(--text-muted); font-size:12.5px; padding:40px 0; }

/* Settings */
.kebun-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; padding:8px; border:1px solid var(--border); border-radius:10px; }
.kebun-row .swatch{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.kebun-row .nama-field{ flex:1; min-width:160px; }
.chip{ display:inline-flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:6px 12px; font-size:12px; }
.chip b{ font-family:var(--font-mono); }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.target-table-wrap{ overflow-x:auto; }
table.settings-table{ border-collapse:collapse; width:100%; font-size:12.5px; min-width:480px; }
table.settings-table th{ text-align:left; font-size:11px; color:var(--text-muted); font-weight:700; padding:6px 8px; border-bottom:1px solid var(--border); }
table.settings-table td{ padding:6px 8px; border-bottom:1px solid var(--border); }
table.settings-table input, table.settings-table select{ border:1px solid var(--border); border-radius:6px; padding:6px 7px; font-family:var(--font-mono); font-size:12px; width:100%; }

.danger-zone{ border:1px dashed #E7BDB4; border-radius:12px; padding:14px; margin-top:6px; }
.danger-zone p{ margin:0 0 10px; font-size:12px; color:var(--text-muted); }

form{ margin:0; }

/* ---------- Kolom Tanggal tetap terlihat saat tabel digeser ke samping ---------- */
table.data-table th:first-child,
table.data-table td:first-child{
  position:sticky;
  left:0;
  z-index:2;
  box-shadow:2px 0 4px rgba(0,0,0,0.05);
}
table.data-table thead tr.grp-row th:first-child{ background:var(--card); box-shadow:none; }
table.data-table thead tr.sub-row th:first-child{ background:#FAF8F1; }
table.data-table tbody td:first-child{ background:var(--card); }
table.data-table tbody tr:hover td:first-child{ background:#FBF9F3; }
table.data-table tfoot td:first-child{ background:#FAF8F1; }

/* ---------- Refinement khusus layar kecil (HP) ---------- */
@media (max-width: 600px){
  .topbar{
    padding:14px 16px;
    flex-direction:column;
    align-items:stretch;
    border-radius:0 0 16px 16px;
    gap:12px;
  }
  .brand{ justify-content:center; }
  .tabs{ width:100%; }
  .tab-btn{ flex:1; text-align:center; padding:9px 6px; }

  .share-banner{ margin:14px 16px 0; }

  .content{ padding:12px 16px 0; }
  .panel{ padding:14px; border-radius:14px; margin-bottom:14px; }
  .panel-head{ gap:10px; margin-bottom:12px; }
  .panel-head h2{ font-size:14px; }
  .panel-actions{ width:100%; }
  .panel-actions form{ width:100%; }

  .stat-grid{ gap:8px; margin-bottom:14px; }
  .stat-card{ padding:11px 12px; }
  .stat-value{ font-size:16px; }

  table.data-table th, table.data-table td{ padding:7px 8px; font-size:12px; }

  /* Tanda supaya jelas tabel & grafik bisa digeser ke samping */
  .table-scroll::before{
    content:"\2194  Geser tabel ke kanan untuk melihat kebun & Group lainnya";
    display:block;
    font-size:11px;
    color:var(--text-muted);
    margin-bottom:8px;
    background:var(--bg);
    padding:7px 10px;
    border-radius:8px;
    border:1px dashed var(--border);
  }
  .chart-scroll::before{
    content:"\2194  Geser untuk melihat tanggal lainnya";
    display:block;
    font-size:11px;
    color:var(--text-muted);
    margin-bottom:6px;
  }

  .charts-grid{ gap:12px; margin-bottom:14px; }
  .chart-panel{ padding:12px; border-radius:14px; }
  .chart-panel h3{ font-size:13px; }

  /* Cegah auto-zoom saat mengetik di iPhone + perbesar target tap */
  .cell-input, .date-input, .text-input, .num-input, .select-input,
  table.settings-table input, table.settings-table select{
    font-size:16px;
    padding:8px 9px;
  }
  .cell-input{ width:76px; }

  .kebun-row{ padding:10px; }
  .kebun-row .nama-field{ min-width:120px; }
}