/* ============================================================
   Dashboard Greenhouse Selo — "Highland Agritech" design system
   Palet: cream + moss (hijau) + teal + amber, dengan mode gelap.
   ============================================================ */
:root {
  /* Nilai persis dari palet "Highland Agritech" hasil Google Stitch (code.html / DESIGN.md) */
  --bg: #f4f1e6;         /* surface-canvas */
  --surface: #fbf9f1;    /* surface-card */
  --surface-2: #ede8d8;  /* surface-secondary */
  --surface-white: #ffffff;
  --ink: #201f18;        /* text-primary */
  --ink-soft: #57543f;   /* text-muted */
  --ink-faint: #57543f;  /* Stitch cuma punya 1 tone abu-abu (text-muted) -- disamakan */
  --line: #ddd5b8;       /* border-subtle */
  --line-soft: #e8e2cc;

  --moss: #3a6a49;        /* primary-container -- dot koneksi, focus ring */
  --moss-strong: #215233; /* primary -- ikon judul section, tombol utama, teks brand */
  --moss-hover: #2e543a;  /* hover tombol utama (persis dari code.html) */
  --teal: #256772;        /* secondary -- ikon pompa, huruf P, pill rentang aktif */
  --amber: #a96a1f;       /* tertiary (narasi DESIGN.md) -- dot status "pending" */
  --amber-icon: #e2a659;  /* dark-amber -- ikon blower, garis grafik suhu udara */
  --tertiary: #6b3d00;    /* tertiary -- huruf K */
  --tertiary-container: #8c5203; /* garis grafik EC (dashed) */
  --dark-teal: #6bc0c9;   /* dark-teal -- garis grafik kelembapan tanah */
  --red: #b23a3a;
  --red-bg: #f3ddd9;

  /* status semantik (terpisah dari warna aksen brand) */
  --status-normal-bg: #e8f2eb;
  --status-normal-text: #20462c;
  --status-low-bg: #e1eff2;
  --status-low-text: #1a4951;
  --status-high-bg: #f9eedb;
  --status-high-text: #75450c;

  --shadow: 0 1px 3px rgba(32,31,24,.04), 0 4px 12px rgba(32,31,24,.03);
  --shadow-ctl: 0 2px 4px rgba(32,31,24,.08);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--moss);
  --font: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}
/* Desain Highland Agritech dari Stitch hanya punya 1 tema (cream/terang).
   Mode gelap TIDAK otomatis ikut preferensi sistem lagi -- supaya tampilan
   selalu konsisten dengan mockup, walau HP/laptop user diset dark mode.
   Kalau nanti mau tambah toggle manual, aktifkan lewat atribut ini. */
:root[data-theme="dark"] {
  --bg: #14170f; --surface: #1b1e15; --surface-2: #24281c; --surface-white: #20241a;
  --ink: #ece7d4; --ink-soft: #b7b19a; --ink-faint: #b7b19a;
  --line: #2e3324; --line-soft: #292c1c;
  --moss: #7cb389; --moss-strong: #7cb389; --moss-hover: #8fc09b;
  --teal: #6bc0c9; --amber: #e2a659; --amber-icon: #e2a659;
  --tertiary: #eebf82; --tertiary-container: #eebf82; --dark-teal: #6bc0c9;
  --red: #e08b82; --red-bg: #331d1a;
  --status-normal-bg: #1f2c22; --status-normal-text: #9bcaa4;
  --status-low-bg: #1a2b2c; --status-low-text: #8fd3da;
  --status-high-bg: #332512; --status-high-text: #eebf82;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 22px -8px rgba(0,0,0,.5);
  --shadow-ctl: 0 2px 6px rgba(0,0,0,.35);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--moss);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.5; -webkit-tap-highlight-color: transparent; }
h1, h2 { margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
button { font: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  font-size: 18px; line-height: 1; vertical-align: middle;
}
@keyframes pulse-subtle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
.live-dot { animation: pulse-subtle 2s infinite ease-in-out; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 22px; background: var(--surface);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.right-stack { display: flex; align-items: center; gap: 10px; }
.support-badge { display: flex; align-items: center; height: 26px; }
.support-badge img { height: 100%; width: auto; max-width: 110px; object-fit: contain; }
.icon-btn {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-white); color: var(--ink-soft);
  text-decoration: none; flex-shrink: 0;
}
.icon-btn:hover { border-color: var(--moss-strong); color: var(--moss-strong); }

.settings-link-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.settings-link-text { display: flex; align-items: flex-start; gap: 10px; }
.settings-link-text .material-symbols-outlined { color: var(--moss-strong); font-size: 22px; margin-top: 2px; }
.settings-link-text h2 { font-size: 1rem; font-weight: 600; margin-bottom: 3px; }
.settings-link-text .hint { display: block; max-width: 480px; }
.logo {
  height: 40px; min-width: 40px; border-radius: 10px;
  background: var(--moss-strong); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.logo.has-image { background: none; width: 160px; min-width: 0; border-radius: 0; overflow: hidden; position: relative; }
/* position:absolute+inset:0 (bukan width/height:100% biasa) supaya gambar dijamin
   pas 100% mengikuti kotak .logo yang PASTI ukurannya (160x40), lepas dari kotak
   induknya yang display:grid -- percentage height/width child grid item ternyata
   TIDAK resolve benar di sini (row track grid ini auto-size ke konten, bukan ke
   height:40px si container), jadi width/height:100% biasa malah diabaikan browser
   dan gambar balik ke ukuran auto sesuai rasio aslinya -> meluber lalu kepotong
   overflow:hidden. position:absolute+inset:0 mengukur relatif ke kotak .logo
   (position:relative) langsung, tanpa lewat mekanisme grid sama sekali. */
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.brand h1 { font-size: 1.12rem; color: var(--moss-strong); font-weight: 700; letter-spacing: -.01em; }
.brand .loc { margin: 0; font-size: .78rem; color: var(--ink-faint); }
.conn {
  display: flex; align-items: center; gap: 7px; font-size: .76rem; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-on { background: var(--moss); }
.dot-off { background: var(--ink-faint); }
.dot-stale { background: var(--amber); }

/* ---------- Layout ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 22px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- Hero ilustrasi ---------- */
.hero { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
/* Rasio disamakan persis dengan viewBox ilustrasi (500:300 = 5:3) supaya lebar
   & tinggi otomatis menyesuaikan lebar layar tanpa memotong sisi manapun --
   preserveAspectRatio "meet" (selalu utuh, dibatasi max-height agar tidak jadi
   terlalu tinggi di layar sangat lebar). */
.hero svg, #heroImg { display: block; width: 100%; aspect-ratio: 5 / 3; max-height: 420px; object-fit: contain; }
#heroImg { object-fit: cover; }
.hero-caption { display: flex; align-items: center; gap: 6px; padding: 10px 16px; font-size: .8rem; color: var(--ink-soft); border-top: 1px solid var(--line-soft); }
.hero-caption .material-symbols-outlined { color: var(--moss-strong); font-size: 16px; }

/* ---------- Halaman awal (landing) ---------- */
.intro-title { font-size: 1.3rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; margin-bottom: 10px; }
.intro-lead { font-size: .92rem; color: var(--ink-soft); line-height: 1.65; max-width: 760px; margin: 0 0 22px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.feature-card { background: var(--surface-white); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.feature-card .material-symbols-outlined { font-size: 26px; color: var(--moss-strong); }
.feature-card h3 { font-size: .92rem; font-weight: 600; color: var(--ink); margin: 10px 0 4px; }
.feature-card p { font-size: .8rem; color: var(--ink-faint); line-height: 1.5; margin: 0; }
.cta-row { display: flex; justify-content: center; padding-top: 4px; }
.btn-cta { padding: 13px 26px; font-size: .95rem; gap: 8px; box-shadow: var(--shadow-ctl); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head-title { display: flex; align-items: center; gap: 8px; }
.panel-head-title .material-symbols-outlined { color: var(--moss-strong); }
.panel-head h2 { font-size: 1.05rem; font-weight: 600; }
.hint { font-size: .76rem; color: var(--ink-faint); }
.group-label {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 16px 0 8px;
}
.group-label:first-of-type { margin-top: 0; }
.group-label .tag {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
}
.group-label .desc { font-size: .74rem; color: var(--ink-faint); }

/* ---------- Tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tile { background: var(--surface-white); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
/* min-width:0 + overflow-wrap -- tanpa ini, grid/flex item TIDAK dipaksa menyusut
   di bawah lebar konten aslinya (default browser: min-width:auto), jadi label
   panjang seperti "Kelembapan Udara" + badge "TINGGI" bisa meluber keluar kotak
   tile alih-alih membungkus ke baris baru. */
.tile-label { font-size: .78rem; color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; }
.tile-val-row { margin-top: 8px; display: flex; align-items: baseline; gap: 4px; }
.tile-val { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tile-unit { font-size: .78rem; color: var(--ink-soft); font-family: var(--mono); }
.tile-ref { display: block; margin-top: 6px; font-size: .72rem; color: var(--ink-faint); }

.badge {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-family: var(--font); font-size: .66rem; font-weight: 700;
  letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.badge .dot { width: 5px; height: 5px; }
.badge.normal { background: var(--status-normal-bg); color: var(--status-normal-text); }
.badge.rendah { background: var(--status-low-bg); color: var(--status-low-text); }
.badge.tinggi { background: var(--status-high-bg); color: var(--status-high-text); }
.badge.na { background: var(--surface-2); color: var(--ink-faint); }

/* NPK mini tiles */
.tiles-npk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile-npk { background: var(--surface-white); border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; }
.tile-npk-top { display: flex; align-items: center; justify-content: space-between; }
.tile-npk-el { font-family: var(--mono); font-size: .72rem; font-weight: 700; }
.tile-npk-el.n { color: var(--moss-strong); }
.tile-npk-el.p { color: var(--teal); }
.tile-npk-el.k { color: var(--tertiary); }
.tile-npk-full { font-size: .62rem; color: var(--ink-faint); margin-top: 1px; }
.tile-npk-val { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; margin: 4px 0 1px; }
.tile-npk-unit { font-size: .66rem; color: var(--ink-faint); }
.tile-npk .badge { margin-top: 6px; font-size: .6rem; padding: 1px 6px; }

/* ---------- Relays ---------- */
.relays { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.relay-card { background: var(--surface-white); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.relay-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 8px; }
.relay-identity { display: flex; align-items: flex-start; gap: 10px; }
.relay-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface-2); color: var(--teal);
}
.relay-icon.amber { color: var(--amber-icon); }
.relay-name { font-weight: 600; font-size: .95rem; }
.relay-sub { font-size: .76rem; color: var(--ink-faint); margin-top: 1px; }
.relay-state { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-faint); flex-shrink: 0; }
.relay-state.on { background: var(--status-normal-bg); color: var(--status-normal-text); }
.relay-state .state-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface-2); padding: 3px; border-radius: 10px; gap: 2px; margin-bottom: 10px; }
.seg-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  border: none; background: transparent; color: var(--ink-soft);
  padding: 8px 6px; border-radius: 8px; font-size: .78rem; font-weight: 500; cursor: pointer;
}
.seg-btn .material-symbols-outlined { font-size: 15px; }
.seg-btn.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-ctl); border: 1px solid var(--line); }

.mode-note { display: flex; align-items: flex-start; gap: 5px; margin: 4px 0 0; font-size: .78rem; color: var(--ink-faint); }
.mode-note .material-symbols-outlined { font-size: 14px; margin-top: 1px; }
.mode-note[hidden], .schedule-editor[hidden], .manual-ctrl[hidden] { display: none; }

.manual-ctrl { display: flex; flex-direction: column; gap: 10px; }
.manual-current { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-soft); }
.manual-current strong { color: var(--ink); font-weight: 700; }
.manual-btns { display: flex; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 9px 14px; border-radius: 8px; font-size: .85rem; cursor: pointer; text-decoration: none; }
.btn .material-symbols-outlined { font-size: 16px; }
.btn:hover { border-color: var(--moss); }
.manual-btns .btn { flex: 1; position: relative; }
.btn-on.active, .btn-off.active { font-weight: 700; box-shadow: var(--shadow-ctl); }
.btn-on.active { background: var(--moss-strong); color: #fff; border-color: var(--moss-strong); }
.btn-off.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-on.active::after, .btn-off.active::after {
  content: 'check_circle'; font-family: 'Material Symbols Outlined'; font-size: 15px;
  position: absolute; top: -7px; right: -7px; background: var(--surface-white);
  color: var(--moss-strong); border-radius: 50%; line-height: 1;
}
.btn-primary { background: var(--moss-strong); color: #fff; border-color: var(--moss-strong); padding: 10px 20px; font-weight: 600; }
.btn-primary:hover { background: var(--moss-hover); border-color: var(--moss-hover); }
.btn-sm { padding: 7px 12px; font-size: .78rem; }

/* Schedule editor */
.schedule-editor { display: flex; flex-direction: column; gap: 8px; }
.schedule-list { display: flex; flex-direction: column; gap: 6px; }
.schedule-row { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.schedule-row input[type="time"] {
  font-family: var(--mono); font-size: .82rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--ink); padding: 5px 6px; width: 100%; min-width: 0;
}
.schedule-row .sep { color: var(--ink-faint); font-size: .78rem; flex-shrink: 0; }
.schedule-row-remove {
  border: none; background: transparent; color: var(--ink-faint); cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0;
}
.schedule-row-remove:hover { background: var(--red-bg); color: var(--red); }
.schedule-empty { font-size: .78rem; color: var(--ink-faint); padding: 6px 2px; }
.btn-add-slot { align-self: flex-start; background: var(--surface); border: 1px dashed var(--line); color: var(--teal); font-size: .8rem; padding: 7px 12px; }
.schedule-actions { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.save-msg { font-size: .8rem; color: var(--moss-strong); }

/* ---------- Charts ---------- */
.range-sel { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 3px; border-radius: 10px; }
.range-sel button { border: none; background: transparent; color: var(--ink-soft); padding: 6px 13px; border-radius: 7px; font-size: .8rem; cursor: pointer; }
.range-sel button.active { background: var(--teal); color: #fff; font-weight: 600; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.chart-box { background: var(--surface-white); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.chart-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.chart-title { font-size: .84rem; color: var(--ink); font-weight: 600; }
.chart-legend { display: flex; gap: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; color: var(--ink-faint); }
.chart-legend .swatch { width: 10px; height: 2px; border-radius: 2px; display: inline-block; }
.chart-box canvas { width: 100% !important; height: 200px !important; }

.charts-empty {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 36px 16px; background: var(--surface-white); border: 1px dashed var(--line); border-radius: 12px;
  text-align: center;
}
.charts-empty p { margin: 0; font-size: .84rem; color: var(--ink-faint); max-width: 320px; line-height: 1.5; }

/* ---------- Settings form ---------- */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0; background: var(--surface-white); }
legend { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink); font-weight: 600; padding: 0 6px; }
legend .material-symbols-outlined { font-size: 15px; color: var(--ink-soft); }
legend.ic-teal .material-symbols-outlined { color: var(--teal); }
legend.ic-amber .material-symbols-outlined { color: var(--amber-icon); }
fieldset label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .84rem; color: var(--ink-soft); margin: 8px 0; }
fieldset input { width: 90px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-family: var(--mono); text-align: right; }
.form-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }

/* Pengaturan Tampilan (appearanceForm) berisi teks bebas panjang (nama, lokasi,
   caption, dst) -- beda dari Ambang Batas yang angka pendek rata kanan. Label
   diletakkan DI ATAS input (bukan sejajar), input selebar fieldset, font normal
   rata kiri, supaya nilai yang diketik user selalu kelihatan penuh. */
#appearanceForm fieldset label.field { display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin: 10px 0; }
#appearanceForm fieldset label.field .field-label { font-size: .8rem; color: var(--ink-soft); }
#appearanceForm fieldset input[type="text"] {
  width: 100%; box-sizing: border-box; text-align: left; font-family: var(--font);
  font-size: .88rem; padding: 9px 10px;
}
#appearanceForm fieldset textarea {
  width: 100%; box-sizing: border-box; text-align: left; font-family: var(--font);
  font-size: .88rem; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--ink); resize: vertical; min-height: 60px; line-height: 1.5;
}

/* ---------- Log Aktivitas ---------- */
.log-table-wrap { overflow-x: auto; }
.log-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.log-table th, .log-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.log-table th { color: var(--ink-faint); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.log-table td:last-child, .log-table th:last-child { white-space: normal; }
.log-table tr:last-child td { border-bottom: none; }
.log-table .log-user { font-weight: 600; color: var(--moss-strong); }
.log-empty { color: var(--ink-faint); text-align: center; padding: 16px !important; white-space: normal; }

/* ---------- Login admin ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 22px; box-sizing: border-box; }
.login-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; }
.login-head { display: flex; align-items: center; gap: 8px; }
.login-head .material-symbols-outlined { color: var(--moss-strong); font-size: 22px; }
.login-head h1 { font-size: 1.1rem; font-weight: 700; }
.login-error {
  display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px;
  background: var(--red-bg); color: var(--red); border-radius: 8px; font-size: .82rem;
}
.login-error .material-symbols-outlined { font-size: 16px; }
.login-card .field { display: flex; flex-direction: column; gap: 5px; }
.login-card .field-label { font-size: .8rem; color: var(--ink-soft); }
.login-card input[type="text"], .login-card input[type="password"] {
  width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--surface); color: var(--ink); font-family: var(--font); font-size: .9rem;
}
.login-btn { width: 100%; justify-content: center; margin-top: 4px; }
.login-back { text-align: center; font-size: .8rem; color: var(--ink-faint); text-decoration: none; margin-top: 4px; }
.login-back:hover { color: var(--moss-strong); }

/* ---------- Akun Admin (CRUD) ---------- */
.admin-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-white); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.admin-row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-row-name { font-size: .88rem; font-weight: 600; color: var(--ink); }
.admin-you { font-weight: 400; color: var(--ink-faint); font-size: .78rem; }
.admin-row-date { font-size: .72rem; color: var(--ink-faint); }
.admin-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.admin-add-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.admin-add-form .field { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 5px; }
.admin-add-form .field-label { font-size: .8rem; color: var(--ink-soft); }
.admin-add-form input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--surface); color: var(--ink); font-family: var(--font); font-size: .88rem;
}

/* ---------- Footer ---------- */
.foot { text-align: center; padding: 6px 0 4px; }
.foot-hw { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink-faint); font-size: .76rem; font-weight: 500; margin-bottom: 4px; }
.foot-app { font-size: .76rem; color: var(--ink-faint); }
.foot-node { font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); opacity: .8; margin-top: 3px; }
.foot-support { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: .74rem; color: var(--ink-faint); }
.foot-support img { height: 20px; width: auto; }

/* ---------- Pengaturan Tampilan ---------- */
.theme-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
#themeColorPicker { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.theme-presets { display: flex; gap: 6px; }
.theme-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface-white); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.theme-swatch:hover, .theme-swatch.active { box-shadow: 0 0 0 2px var(--ink); }
.logo-upload-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; }
.logo-preview {
  height: 44px; min-width: 44px; border-radius: 10px; flex-shrink: 0;
  background: var(--moss-strong); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: .9rem; overflow: hidden;
}
.logo-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-preview.has-image { background: none; width: 140px; min-width: 0; position: relative; }
.logo-preview-support { background: var(--surface-2); color: var(--ink-faint); }
.logo-preview-support:empty::before { content: '—'; }
.logo-upload-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.file-btn { cursor: pointer; }
.hero-preview {
  width: 96px; height: 44px; border-radius: 8px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--line); overflow: hidden;
  display: grid; place-items: center; color: var(--ink-faint); font-size: .68rem;
}
.hero-preview img { width: 100%; height: 100%; object-fit: cover; }
.hero-preview:empty::before { content: 'Bawaan'; }

/* Ikon kecil di setiap tile sensor -- warnanya disamakan dengan warna garis grafik terkait */
.tile-label-wrap { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tile-icon { flex-shrink: 0; }
.tile-icon { font-size: 15px !important; }

@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  .wrap { padding: 14px; gap: 14px; }
  .panel { padding: 16px; }
  .relays { grid-template-columns: 1fr; }

  /* Judul panel + tombol rentang waktu (1 jam/6 jam/24 jam/7 hari) tidak muat
     sejajar di layar sempit -- biarkan wrap ke baris baru penuh lebar, tombolnya
     dibagi rata, alih-alih meluber keluar kartu panel. */
  .panel-head { flex-wrap: wrap; row-gap: 8px; }
  .range-sel { width: 100%; justify-content: space-between; }
  .range-sel button { flex: 1; padding: 6px 4px; font-size: .74rem; }

  /* Kunci 2 kolom rapat (bukan auto-fill yang jatuh ke 1 kolom di layar sempit) --
     sesuai DESIGN.md: "Realtime tiles split into 2-up grids for maximum data density". */
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tile { padding: 10px 12px; }
  .tile-val { font-size: 1.3rem; }
  .tiles-npk { gap: 6px; }

  /* Label mode (Otomatis/Jadwal/Manual) TETAP terlihat -- jangan cuma ikon,
     supaya 3 mode tidak ambigu di layar kecil. Perkecil ukuran biar tetap muat. */
  .seg-btn { flex-direction: column; gap: 2px; padding: 7px 2px; font-size: .66rem; }
  .seg-btn .material-symbols-outlined { font-size: 16px; }

  .relay-card { padding: 14px; }
  .settings-grid { grid-template-columns: 1fr; }
  fieldset input { width: 84px; }
  .hero-caption { font-size: .74rem; padding: 8px 12px; }

  /* Pill status koneksi ("Terhubung"/"Data tertunda" + jam) diperkecil di mobile */
  .conn { font-size: .58rem; gap: 4px; padding: 2px 7px; }
  .conn .dot { width: 5px; height: 5px; }

  /* Topbar dipaksa tetap 1 baris (logo+nama di kiri, badge+jam di kanan) --
     brand boleh menyusut & teksnya dipotong "..." kalau kepanjangan, supaya
     topbar-right tidak turun ke baris baru. */
  .topbar { flex-wrap: nowrap; gap: 8px; }
  .brand { min-width: 0; gap: 8px; flex-shrink: 1; }
  .brand > div { min-width: 0; }
  .brand h1, .brand .loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand h1 { font-size: .95rem; }
  .brand .loc { font-size: .68rem; }
  .logo { height: 32px; min-width: 32px; font-size: .82rem; }
  .logo.has-image { min-width: 0; width: 100px; }
  .topbar-right { flex-shrink: 0; gap: 12px; }
  /* Logo Support & status koneksi ditumpuk atas-bawah (bukan sejajar) di ujung
     kanan header -- lebih hemat lebar dibanding sejajar horizontal. Tombol
     home di sebelahnya TIDAK ikut ditumpuk, ukurannya tetap (lihat .icon-btn). */
  .right-stack { flex-direction: column; align-items: flex-end; gap: 4px; }
  .support-badge { height: 16px; }
  .support-badge img { max-width: 56px; }
}