:root{
  --bg:#fffafa;             /* latar halaman */
  --card:#ffffff;           /* kartu/panel */
  --muted:#64748b;          /* teks sekunder */
  --accent:#ec4899;         /* pink */
  --accent2:#f472b6;        /* pink muda */
  --ok:#10b981;
  --warn:#f59e0b;
  --err:#ef4444;
  --grid:#f5cfe0;           /* garis/grid lembut */
  --text:#0f172a;           /* teks utama */
  --soft:#fff1f5;           /* permukaan lembut */
  --border:#f8d9e7;         /* border umum */
  --surface:#ffffff;        /* permukaan utama */
  --surface2:#fff5f9;       /* permukaan sekunder */
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    /* glow pink di kiri atas */
    radial-gradient(1200px 600px at 10% -10%, rgba(244,114,182,.18), transparent 60%),
    /* glow ungu di kanan atas */
    radial-gradient(900px 520px at 90% -20%, rgba(167,139,250,.18), transparent 55%),
    /* gradasi dasar: pink → ungu */
    linear-gradient(160deg, #ffe4ef 0%, #f5d0fe 45%, #e9d5ff 75%, #ede9fe 100%);
  color:var(--text);
}

/* Header & Nav */
header{
  padding:14px 16px;
  background: linear-gradient(90deg, var(--card), #ffe4ef 0%, #f3e8ff 100%); /* selaras dengan bg */
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.brand{
  font-weight:600; letter-spacing:.2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip:text; color:transparent; font-size:14px;
}
.title{ font-size:12px; color:var(--muted) }
.nav{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap }
.nav a{
  padding:8px 10px; border-radius:10px; font-size:12px; text-decoration:none;
  background:var(--surface2); color:var(--text); border:1px solid var(--border);
}
.nav a:hover{ background:#fff1f5 }
.nav a.active, .nav a.login{
  background:linear-gradient(90deg, var(--accent2), var(--accent));
  color:#5b0a2a; border:0; font-weight:600;
}

/* Layout umum */
.wrap{ max-width:1400px; margin:14px auto; padding:0 12px }
.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:14px;
  box-shadow:0 8px 24px rgba(2,6,23,.06);
}
.title-sm{ font-size:12px; color:var(--muted); margin:0 0 6px }
.title-lg{ font-size:20px; margin:4px 0 8px; letter-spacing:.2px }
.lead{ color:#334155; font-size:13px; line-height:1.65 }

.grid{ display:grid; gap:12px }
@media (min-width:1000px){
  .grid-2{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
}

.chips{ display:flex; gap:8px; flex-wrap:wrap }
.chip{
  background:var(--surface2); border:1px solid var(--border); padding:6px 8px; border-radius:8px; font-size:11px; color:#334155;
}
.chip.ok{ border-color:#a7f3d0; background:#ecfdf5; color:#047857 }
.chip.warn{ border-color:#fed7aa; background:#fff7ed; color:#b45309 }

.btn, .btn-ghost{
  padding:8px 12px; border-radius:10px; font-size:12px; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:var(--surface2); color:var(--text); cursor:pointer;
}
.btn{
  background:linear-gradient(90deg, var(--accent2), var(--accent));
  border:0; color:#5b0a2a; font-weight:600;
}

/* Tabel */
.table-wrap{ overflow:auto; border-radius:12px; border:1px solid var(--border); background:var(--surface); }
table{ width:100%; border-collapse:separate; border-spacing:0; min-width:900px; font-size:12px }
thead th{
  position:sticky; top:0; z-index:2;
  background:linear-gradient(0deg, #fff1f5, #ffe4ef);
  color:#334155; text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td{ padding:6px 10px; border-bottom:1px dashed var(--grid); color:#0f172a; white-space:nowrap }
tbody tr:hover{ background:rgba(236,72,153,.10) }
.num{ text-align:right; font-variant-numeric:tabular-nums }
.muted{ color:#64748b }
.tag{ padding:2px 6px; border-radius:6px; background:var(--surface2); border:1px solid var(--border); font-size:11px }

/* Form */
form label{ font-size:12px; color:#64748b }
input[type="text"], input[type="password"], input[type="email"], input[type="datetime-local"]{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #f1bacf;
  background:#ffffff; color:#0f172a; font-size:14px; outline:none;
}

/* Chart container */
.chart-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px }
canvas{ width:100%; height:340px }

/* Control cards */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px;
  display:grid; grid-template-columns: 1fr 1fr; gap:10px; align-items:center;
}
.card.warn{ border-color:#fed7e2; box-shadow:0 0 0 1px rgba(244,114,182,.18) inset; }
.card.danger{ border-color:#fecaca; box-shadow:0 0 0 1px rgba(239,68,68,.20) inset; }

.dev-title{ font-size:14px; font-weight:600; margin:0 0 6px }
.lamp{ width:14px; height:14px; border-radius:50%; box-shadow: 0 0 0 2px rgba(15,23,42,.06) inset; display:inline-block; margin-right:6px; }
.lamp.on{ background:#10b981; box-shadow:0 0 10px rgba(16,185,129,.45) }
.lamp.off{ background:#fde2ec; }
.status-badge{
  display:inline-block; padding:2px 8px; border-radius:8px; font-size:11px; border:1px solid var(--border); background:var(--surface2);
}
.status-0{ color:#065f46; border-color:#a7f3d0; background:#ecfdf5 }
.status-1{ color:#9d174d; border-color:#fbcfe8; background:#fdf2f8 }
.status-2{ color:#991b1b; border-color:#fecaca; background:#fef2f2 }

.kv{ display:grid; grid-template-columns: 1fr 1fr; gap:6px; font-size:12px }
.kv div{ background:var(--soft); border:1px solid var(--border); border-radius:10px; padding:8px }
.label{ color:#64748b; font-size:11px }
.val{ font-variant-numeric:tabular-nums; font-weight:600 }

/* Footer */
footer{ color:#9ca3af; font-size:11px; text-align:center; padding:18px 0 }

/* === HAMBURGER NAV (mobile) === */
.menu-toggle{
  display:none;
  margin-left:auto;
  align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface2); color:var(--text);
  font-size:12px; cursor:pointer;
}
.menu-toggle svg{ display:block }

/* Panel nav pada mobile: default tersembunyi */
@media (max-width:900px){
  .menu-toggle{ display:flex; }
  header .nav{ display:none; width:100%; }
  header .nav.open{ display:flex; }
}

/* aksesibilitas: screen-reader only */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,1,1); white-space:nowrap; border:0;
}

/* === Make .input-style white & readable === */
.input-style,
input.input-style,
select.input-style,
textarea.input-style {
  background:#ffffff !important;
  color:#0f172a !important;           /* teks hitam */
  border:1px solid #f1bacf;           /* border pink lembut */
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  color-scheme: light;                /* paksa UI bawaan terang (date/time) */
}

/* placeholder */
.input-style::placeholder { color:#64748b; opacity:1; }

/* focus ring */
.input-style:focus {
  outline:none;
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px rgba(244,114,182,.18);
}

/* date & datetime: pastikan editor/ikon ikut gelap/terang yang benar */
.input-style[type="date"],
.input-style[type="datetime-local"] { color-scheme: light; }
.input-style[type="date"]::-webkit-datetime-edit,
.input-style[type="datetime-local"]::-webkit-datetime-edit { color:#0f172a; }
.input-style[type="date"]::-webkit-calendar-picker-indicator,
.input-style[type="datetime-local"]::-webkit-calendar-picker-indicator { background:transparent; opacity:.85; }

/* autofill Chrome */
.input-style:-webkit-autofill {
  -webkit-text-fill-color:#0f172a;
  -webkit-box-shadow:0 0 0 1000px #ffffff inset;
  caret-color:#0f172a;
}

/* disabled/read-only */
.input-style:disabled,
.input-style[disabled],
.input-style[readonly]{
  background:#f8fafc !important;
  color:#94a3b8 !important;
  border-color:#e5e7eb;
  cursor:not-allowed;
}
/* === Pink borders for .input-style === */
.input-style,
input.input-style,
select.input-style,
textarea.input-style {
  border: 1px solid var(--accent) !important;      /* pink #ec4899 */
}

/* fokus: sedikit lebih lembut & ada glow */
.input-style:focus,
input.input-style:focus,
select.input-style:focus,
textarea.input-style:focus {
  border-color: var(--accent2) !important;         /* pink muda #f472b6 */
  box-shadow: 0 0 0 3px rgba(244,114,182,.22);
  outline: 0;
}

/* number/date yang sudah di-force putih ikut pink juga */
.input-style[type="number"],
.input-style[type="date"],
.input-style[type="datetime-local"]{
  border-color: var(--accent) !important;
}