/* AgriTech v2.9.6 — Modular Dashboard Editor
   Hanya mengatur posisi/ukuran card. Logika relay, sensor, Firebase, AI,
   jadwal, otomasi, histori, dan grafik tetap berada di app.js asli. */

:root{
  --mod-cols:12;
  --mod-row:44px;
  --mod-gap:7px;
  --mod-editor:#58ef73;
  --mod-editor-bg:rgba(3,24,17,.94);
}

.modular-dashboard{
  display:grid;
  grid-template-columns:repeat(var(--mod-cols),minmax(0,1fr));
  grid-auto-rows:var(--mod-row);
  gap:var(--mod-gap);
  position:relative;
  margin-top:2px;
  min-height:200px;
  align-items:stretch;
}

body.layout-mobile .modular-dashboard{
  --mod-cols:4;
  --mod-row:42px;
  --mod-gap:6px;
}

.mod-widget{
  min-width:0;
  min-height:0;
  position:relative;
  border-radius:24px;
  transition:box-shadow .18s ease,transform .18s ease,opacity .18s ease;
  overflow:visible;
}

.mod-widget[hidden]{display:none!important}

.mod-widget-content{
  position:absolute;
  inset:0;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border-radius:inherit;
}

.widget-content-host{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

.widget-content-host>*{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0!important;
}

/* Semua card asli mengikuti ukuran widget tanpa mengubah event/function. */
.mod-widget[data-widget-id="hero"] .widget-content-host,
.mod-widget[data-widget-id="hero"] .hero{overflow:hidden}
.mod-widget[data-widget-id="hero"] .hero{height:100%!important;min-height:0!important;border-radius:inherit}
.mod-widget[data-widget-id="weather"] .weather{height:100%;min-height:0;border-radius:inherit;overflow:auto}
.mod-widget[data-widget-id="sensors"] .sensor-grid{height:100%;min-height:0;align-content:start;overflow:auto;padding:1px}
.mod-widget[data-widget-id="controls"] .panel,
.mod-widget[data-widget-id="schedule"] .panel,
.mod-widget[data-widget-id="monitoring"] .monitoring,
.mod-widget[data-widget-id="system"] .system-strip{height:100%;min-height:0;border-radius:inherit;overflow:auto}
.mod-widget[data-widget-id="monitoring"] .monitoring{display:flex;flex-direction:column}
.mod-widget[data-widget-id="monitoring"] .chart-wrap{flex:1;min-height:180px}
.mod-widget[data-widget-id="system"] .system-strip{margin:0!important}

/* Toolbar utama */
.layout-manager-btn{
  min-height:42px;
  border-radius:13px;
  border:1px solid var(--line);
  color:#eaffed;
  background:rgba(8,46,31,.62);
  padding:0 13px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.layout-manager-btn.is-editing{
  color:#052315;
  background:var(--mod-editor);
  border-color:var(--mod-editor);
  box-shadow:0 0 18px rgba(88,239,115,.28);
}

.layout-edit-toolbar{
  position:fixed;
  z-index:70;
  left:50%;
  top:max(10px,env(safe-area-inset-top));
  transform:translateX(-50%) translateY(-130%);
  opacity:0;
  pointer-events:none;
  width:min(880px,calc(100% - 18px));
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px;
  border-radius:18px;
  background:rgba(3,28,19,.96);
  border:1px solid rgba(88,239,115,.35);
  box-shadow:0 18px 65px rgba(0,0,0,.46);
  backdrop-filter:blur(18px);
  transition:.2s ease;
}
body.layout-editing .layout-edit-toolbar{
  transform:translateX(-50%) translateY(0);
  opacity:1;
  pointer-events:auto;
}
.layout-edit-toolbar .layout-edit-title{display:flex;flex-direction:column;min-width:128px;margin-right:auto}
.layout-edit-toolbar .layout-edit-title b{font-size:12px;color:#eaffed}
.layout-edit-toolbar .layout-edit-title small{font-size:9px;color:#9fc5aa;margin-top:2px}
.layout-edit-toolbar button,.layout-edit-toolbar select{
  min-height:36px;border:1px solid var(--line);border-radius:11px;background:#0a3a28;color:#eaffed;padding:0 10px;font-size:10px
}
.layout-edit-toolbar .save-layout-btn{background:var(--mod-editor);border-color:var(--mod-editor);color:#052315;font-weight:800}
.layout-edit-toolbar .cancel-layout-btn{background:rgba(97,110,103,.22)}
.layout-edit-toolbar .danger-layout-btn{color:#ffb2b2;border-color:rgba(255,92,92,.3);background:rgba(130,30,38,.24)}

/* Kontrol widget hanya terlihat ketika mode edit aktif. */
.widget-edit-bar{
  position:absolute;
  z-index:8;
  left:7px;
  right:7px;
  top:7px;
  display:flex;
  align-items:center;
  gap:5px;
  opacity:0;
  pointer-events:none;
  transform:translateY(-5px);
  transition:.15s ease;
}
body.layout-editing .widget-edit-bar{opacity:1;pointer-events:auto;transform:none}
.widget-drag-handle{
  min-width:0;
  flex:1;
  height:34px;
  border:1px solid rgba(88,239,115,.45);
  border-radius:11px;
  color:#eaffed;
  background:rgba(3,31,21,.9);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  padding:0 10px;
  font-size:10px;
  font-weight:700;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.widget-drag-handle:active{cursor:grabbing}
.widget-edit-action{
  width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(3,31,21,.9);color:white;font-size:13px
}
.widget-edit-action.hide-widget{color:#ff9e9e;border-color:rgba(255,92,92,.25)}
.widget-resize-handle{
  position:absolute;
  z-index:9;
  right:3px;
  bottom:3px;
  width:37px;
  height:37px;
  border-radius:12px 0 19px 0;
  border:0;
  color:#052315;
  background:linear-gradient(135deg,transparent 0 40%,var(--mod-editor) 41% 100%);
  opacity:0;
  pointer-events:none;
  cursor:nwse-resize;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  font-size:0;
}
.widget-resize-handle:after{content:"↘";position:absolute;right:5px;bottom:3px;font-size:14px;font-weight:900}
body.layout-editing .widget-resize-handle{opacity:1;pointer-events:auto}

body.layout-editing .mod-widget{
  outline:1px dashed rgba(88,239,115,.58);
  outline-offset:-2px;
  box-shadow:0 0 0 2px rgba(3,24,17,.88),0 10px 35px rgba(0,0,0,.4);
}
body.layout-editing .mod-widget.is-selected{
  outline:2px solid var(--mod-editor);
  box-shadow:0 0 0 3px rgba(88,239,115,.16),0 14px 42px rgba(0,0,0,.48);
}
body.layout-editing .mod-widget.is-dragging,
body.layout-editing .mod-widget.is-resizing{opacity:.88;z-index:20;transform:scale(1.008)}
body.layout-editing .widget-content-host{
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  filter:saturate(.86) brightness(.9);
}
body.layout-editing .modular-dashboard:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(to right,rgba(88,239,115,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(88,239,115,.07) 1px,transparent 1px);
  background-size:calc((100% - (var(--mod-cols) - 1)*var(--mod-gap))/var(--mod-cols) + var(--mod-gap)) calc(var(--mod-row) + var(--mod-gap));
  border-radius:18px;
  z-index:0;
}

/* Dialog pengelola */
.layout-manager-dialog{
  width:min(680px,calc(100% - 20px));
  max-height:calc(100dvh - 24px);
  padding:0;
  border:1px solid rgba(88,239,115,.25);
  border-radius:23px;
  background:linear-gradient(160deg,#0d3928,#041c15);
  color:var(--text);
  box-shadow:0 24px 100px #000;
  overflow:hidden;
}
.layout-manager-dialog::backdrop{background:rgba(0,5,3,.72);backdrop-filter:blur(5px)}
.layout-manager-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.layout-manager-head{display:flex;align-items:center;justify-content:space-between;padding:17px 18px;border-bottom:1px solid var(--line)}
.layout-manager-head b{font-size:15px}.layout-manager-head small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.layout-manager-body{padding:16px 18px;overflow:auto}
.layout-manager-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-bottom:14px}
.layout-manager-row label{display:block;color:#b8d8c0;font-size:11px}
.layout-manager-row select{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:10px;background:#06291c;color:white;padding:10px}
.layout-widget-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.layout-widget-option{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;padding:10px;background:rgba(2,28,18,.44);font-size:11px;color:#d8f2de}
.layout-widget-option input{accent-color:var(--mod-editor);width:17px;height:17px}
.layout-widget-option span{flex:1}.layout-widget-option small{color:var(--muted);font-size:9px}
.layout-manager-actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;background:rgba(3,28,20,.72);border-top:1px solid var(--line)}
.layout-manager-actions button{min-height:39px;border-radius:11px;border:1px solid var(--line);background:#0a3a28;color:#eaffed;padding:0 12px;font-size:11px}
.layout-manager-actions .primary-layout-action{margin-left:auto;background:var(--mod-editor);border-color:var(--mod-editor);color:#052315;font-weight:800}
.layout-editor-tip{border:1px solid rgba(88,239,115,.18);border-radius:12px;padding:11px;margin:12px 0 0;color:#b9d9c1;font-size:10px;line-height:1.5;background:rgba(12,61,39,.35)}
.layout-file-input{display:none}

.layout-nudge-controls{display:flex;align-items:center;gap:4px}
.layout-nudge-controls button{width:34px!important;padding:0!important;font-size:13px!important}
.layout-selected-label{max-width:115px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c6e8ce;font-size:10px}

/* Compact behavior agar card tetap masuk saat diperkecil user. */
.mod-widget[data-widget-id="weather"].is-compact .weather-source,
.mod-widget[data-widget-id="weather"].is-compact .weather-location,
.mod-widget[data-widget-id="weather"].is-compact .weather-sun{display:none!important}
.mod-widget[data-widget-id="system"].is-compact .eyebrow,
.mod-widget[data-widget-id="system"].is-compact small{display:none!important}
.mod-widget[data-widget-id="schedule"].is-compact .schedule-row:nth-child(n+4){display:none}
.mod-widget[data-widget-id="controls"].is-compact .danger-btn{display:none}

@media(max-width:960px){
  .layout-edit-toolbar{top:auto;bottom:calc(82px + env(safe-area-inset-bottom));flex-wrap:wrap;justify-content:center}
  .layout-edit-toolbar .layout-edit-title{width:100%;margin:0;text-align:center}
  .layout-edit-toolbar select{max-width:130px}
}

@media(max-width:720px){
  .layout-manager-btn{width:40px;padding:0;font-size:0}
  .layout-manager-btn:before{content:"▦";font-size:18px}
  .layout-widget-list{grid-template-columns:1fr}
  .layout-edit-toolbar{gap:5px;padding:7px;border-radius:16px}
  .layout-edit-toolbar button,.layout-edit-toolbar select{min-height:34px;padding:0 8px;font-size:9px}
  .layout-nudge-controls{order:5;width:100%;justify-content:center}
  .layout-selected-label{max-width:90px}
  body.layout-editing{padding-bottom:190px}
  .widget-edit-bar{left:5px;right:5px;top:5px}
  .widget-drag-handle{height:32px}
  .widget-edit-action{width:32px;height:32px}
  .mod-widget{border-radius:20px}
  .mod-widget[data-widget-id="sensors"] .sensor-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:390px){
  .layout-edit-toolbar .danger-layout-btn{display:none}
  .layout-edit-toolbar .layout-edit-title small{display:none}
}

/* =========================================================
   AgriTech v2.9.7 — precision grid, autofit, nested subcards
   ========================================================= */
:root{
  --mod-cols:24;
  --mod-row:22px;
  --mod-gap:3.5px;
  --sub-cols:24;
  --sub-row:14px;
  --sub-gap:3px;
}

.modular-dashboard{
  min-height:0!important;
  margin-bottom:0!important;
  align-content:start;
  grid-auto-flow:row;
}
body.layout-mobile .modular-dashboard{
  --mod-cols:8;
  --mod-row:21px;
  --mod-gap:3px;
}

.widget-content-host{
  overflow:hidden!important;
  scrollbar-width:none;
}
.widget-content-host::-webkit-scrollbar{display:none}
.widget-scale-canvas{
  position:relative;
  min-width:0;
  min-height:0;
  transform-origin:top left;
  will-change:transform;
  overflow:visible;
}
.widget-scale-canvas>*{max-width:100%}

/* Ukuran pegangan diperkecil supaya gerakan lebih detail dan area card tidak tertutup. */
.widget-edit-bar{left:4px;right:4px;top:4px;gap:3px}
.widget-drag-handle{
  height:28px;
  border-radius:8px;
  gap:5px;
  padding:0 7px;
  font-size:8px;
}
.widget-edit-action{
  width:28px;
  height:28px;
  border-radius:8px;
  font-size:11px;
  padding:0;
}
.subcard-edit-action{width:38px!important;color:#bfffc8!important;border-color:rgba(88,239,115,.38)!important}
.subcard-edit-action span{font-size:8px;font-weight:800;letter-spacing:.02em}
.widget-resize-handle{
  right:2px;
  bottom:2px;
  width:25px;
  height:25px;
  border-radius:8px 0 17px 0;
}
.widget-resize-handle:after{right:3px;bottom:1px;font-size:10px}
.layout-nudge-controls{gap:2px}
.layout-nudge-controls button{width:30px!important;min-height:30px!important;font-size:11px!important}

body.layout-editing .modular-dashboard:before{
  background-size:
    calc((100% - (var(--mod-cols) - 1)*var(--mod-gap))/var(--mod-cols) + var(--mod-gap))
    calc(var(--mod-row) + var(--mod-gap));
  background-image:
    linear-gradient(to right,rgba(88,239,115,.085) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(88,239,115,.085) 1px,transparent 1px);
}

/* Nested subcard layout. Aktif hanya setelah pengguna membuka tombol Isi. */
.custom-subgrid{
  display:grid!important;
  grid-template-columns:repeat(var(--sub-cols),minmax(0,1fr))!important;
  grid-auto-rows:var(--sub-row)!important;
  gap:var(--sub-gap)!important;
  align-content:start!important;
  min-width:0!important;
  min-height:0!important;
  overflow:visible!important;
}
.custom-subgrid>.subcard-item{
  position:relative!important;
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  overflow:hidden!important;
}
.subcard-scale-canvas{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  transform-origin:top left;
  will-change:transform;
}

/* Rekonstruksi layout asli di dalam canvas agar fungsi dan tampilan tetap sama. */
.hero-facts.custom-subgrid>.fact>.subcard-scale-canvas{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:10px;
  align-items:center;
  padding:inherit;
}
.weather.custom-subgrid>.weather-main>.subcard-scale-canvas,
.weather.custom-subgrid>.weather-item>.subcard-scale-canvas{
  display:flex;
  align-items:center;
  gap:12px;
  padding:inherit;
}
.sensor-grid.custom-subgrid>.sensor-card>.subcard-scale-canvas{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:inherit;
}
.relay-grid.custom-subgrid>.relay-card>.subcard-scale-canvas{
  display:grid;
  grid-template-columns:33px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:inherit;
}
.timeline.custom-subgrid{
  padding-left:0!important;
}
.timeline.custom-subgrid:before,
.timeline.custom-subgrid>.schedule-row:before{display:none!important}
.timeline.custom-subgrid>.schedule-row>.subcard-scale-canvas{
  display:grid;
  grid-template-columns:53px minmax(0,1fr) 22px;
  gap:10px;
  align-items:center;
  padding:inherit;
}
.chart-kpis.custom-subgrid>.subcard-item>.subcard-scale-canvas{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:inherit;
}
.system-strip.custom-subgrid{
  display:grid!important;
  align-items:stretch!important;
}
.system-strip.custom-subgrid>.subcard-item>.subcard-scale-canvas{padding:inherit}
.system-strip.custom-subgrid>.system-actions>.subcard-scale-canvas{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.subcard-edit-bar{
  position:absolute;
  z-index:18;
  left:3px;
  right:3px;
  top:3px;
  display:flex;
  align-items:center;
  gap:4px;
  opacity:0;
  pointer-events:none;
  transform:translateY(-3px);
  transition:.14s ease;
}
.subcard-edit-bar span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#dfffe5;
  font-size:7px;
  font-weight:700;
  text-shadow:0 1px 2px #001;
}
.subcard-drag-handle{
  width:22px;
  height:22px;
  padding:0;
  border-radius:6px;
  border:1px solid rgba(88,239,115,.55);
  background:rgba(2,30,20,.94);
  color:#eaffed;
  font-size:10px;
  cursor:grab;
  touch-action:none;
}
.subcard-resize-handle{
  position:absolute;
  z-index:19;
  right:1px;
  bottom:1px;
  width:20px;
  height:20px;
  padding:0;
  border:0;
  border-radius:6px 0 12px 0;
  background:linear-gradient(135deg,transparent 0 42%,var(--mod-editor) 43% 100%);
  opacity:0;
  pointer-events:none;
  cursor:nwse-resize;
  touch-action:none;
}
.subcard-resize-handle:after{
  content:"↘";
  position:absolute;
  right:2px;
  bottom:0;
  color:#052315;
  font-size:8px;
  font-weight:900;
}
body.subcard-editing .is-subcard-editor .subcard-edit-bar{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
body.subcard-editing .is-subcard-editor .subcard-resize-handle{
  opacity:1;
  pointer-events:auto;
}
body.subcard-editing .is-subcard-editor .subcard-item{
  outline:1px dashed rgba(88,239,115,.62);
  outline-offset:-2px;
}
body.subcard-editing .is-subcard-editor .subcard-item.is-subcard-selected{
  outline:2px solid var(--mod-editor);
  box-shadow:0 0 0 2px rgba(88,239,115,.16);
}
body.subcard-editing .mod-widget:not(.is-subcard-editor){
  opacity:.42;
}
body.subcard-editing .widget-drag-handle,
body.subcard-editing .widget-resize-handle,
body.subcard-editing .hide-widget,
body.subcard-editing .compact-widget{
  pointer-events:none!important;
  opacity:.35!important;
}
body.subcard-editing .is-subcard-editor .widget-content-host{
  pointer-events:auto!important;
  filter:saturate(.9) brightness(.92)!important;
}
body.subcard-editing .is-subcard-editor .subcard-scale-canvas{
  pointer-events:none!important;
}
body.subcard-editing .is-subcard-editor .subcard-edit-bar,
body.subcard-editing .is-subcard-editor .subcard-resize-handle{
  pointer-events:auto!important;
}

/* Sensor visibility editor. */
.sensor-setting{
  grid-template-columns:92px minmax(0,1fr) 62px!important;
  align-items:center;
  transition:opacity .16s ease,border-color .16s ease;
}
.sensor-setting>small{
  grid-column:1/-1;
  color:var(--muted);
  font-size:8px;
  line-height:1.35;
}
.sensor-visibility-control{
  display:flex;
  align-items:center;
  gap:6px;
  color:#cffff0;
  font-size:9px;
}
.sensor-visibility-control input{
  width:16px!important;
  height:16px!important;
  margin:0!important;
  padding:0!important;
  accent-color:var(--mod-editor);
}
.sensor-visibility-control b{font-size:9px}
.sensor-setting-hidden{
  opacity:.58;
  border-color:rgba(255,255,255,.08)!important;
}
.sensor-dashboard-empty{
  grid-column:1/-1;
  align-self:start;
  border:1px dashed var(--line);
  border-radius:13px;
  padding:15px!important;
  text-align:center;
}

@media(max-width:720px){
  .widget-drag-handle{height:26px!important}
  .widget-edit-action{width:26px;height:26px}
  .subcard-edit-action{width:35px!important}
  .sensor-setting{grid-template-columns:82px minmax(0,1fr) 54px!important}
  .sensor-settings-grid{grid-template-columns:1fr!important}
  .layout-edit-toolbar button,.layout-edit-toolbar select{min-height:31px!important}
}