:root{
  --paper:#F5F3EA;
  --paper-raised:#FBFAF4;
  --ink:#20301F;
  --ink-soft:#4B5A44;
  --paddy:#294B2C;
  --paddy-light:#4C7A4F;
  --gold:#C79A3E;
  --gold-soft:#E4C77E;
  --soil:#7A5C3E;
  --hairline:#DCD9C8;
  --danger:#B4472E;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:'IBM Plex Sans', sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

.container{max-width:960px;margin:0 auto;padding:0 24px;}

/* ===== Top bar ===== */
.topbar{
  background:var(--paddy);
  color:#F5F3EA;
}
.topbar-inner{
  max-width:960px;
  margin:0 auto;
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Fraunces', serif;
  font-size:1.15rem;
  font-weight:500;
  letter-spacing:0.2px;
}
.brand svg{width:22px;height:22px;stroke:var(--gold-soft);flex-shrink:0;}

nav.tabs{
  display:flex;
  gap:28px;
}
nav.tabs a{
  text-decoration:none;
  color:#CFD8C6;
  font-size:0.92rem;
  font-weight:500;
  padding-bottom:4px;
  border-bottom:2px solid transparent;
  transition:color 0.2s, border-color 0.2s;
}
nav.tabs a:hover{color:#fff;}
nav.tabs a.active{color:#fff;border-bottom-color:var(--gold);}

/* ===== Hero ===== */
header.hero{
  max-width:960px;
  margin:0 auto;
  padding:46px 24px 30px;
}
header.hero h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:2.1rem;
  line-height:1.2;
  color:var(--ink);
  max-width:16ch;
}
header.hero p{
  margin-top:8px;
  font-size:0.98rem;
  color:var(--ink-soft);
  max-width:46ch;
}
.status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:16px;
  font-size:0.82rem;
  color:var(--ink-soft);
}
.status .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--danger);
  flex-shrink:0;
}
.status.online .dot{background:#3E8E4F;}
.status.online{color:var(--paddy);}

/* ===== Reading strip (pengganti kartu SaaS) ===== */
.readings{
  background:var(--paper-raised);
  border:1px solid var(--hairline);
  border-radius:6px;
  margin:0 24px 28px;
  max-width:912px;
  margin-left:auto;
  margin-right:auto;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
}
.reading{
  padding:26px 20px;
  border-right:1px solid var(--hairline);
  position:relative;
}
.reading:last-child{border-right:none;}
.reading .icon{
  width:26px;height:26px;
  stroke:var(--paddy-light);
  margin-bottom:14px;
}
.reading .label{
  font-size:0.8rem;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.reading .value{
  font-family:'Fraunces', serif;
  font-size:1.9rem;
  font-weight:500;
  color:var(--ink);
  line-height:1;
}
.reading .unit{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:1rem;
  font-weight:400;
  color:var(--ink-soft);
  margin-left:2px;
}
.reading .bar-bg{
  width:100%;height:3px;background:var(--hairline);margin-top:14px;overflow:hidden;
}
.reading .bar-fill{
  height:100%;background:var(--gold);width:0%;transition:width 0.4s ease;
}

.updated{
  max-width:912px;
  margin:-10px auto 30px;
  padding:0 24px;
  font-size:0.8rem;
  color:var(--ink-soft);
  text-align:right;
}

footer{
  text-align:center;
  color:var(--ink-soft);
  font-size:0.78rem;
  padding:30px 0 40px;
  border-top:1px solid var(--hairline);
  margin-top:10px;
}

/* ===== Panel Filter (Halaman Log) ===== */
.panel{
  max-width:912px;
  margin:0 auto 24px;
  padding:0 24px;
}
.panel h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  color:var(--ink);
  font-size:1.2rem;
  margin-bottom:16px;
}

.filter-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
}
.filter-btn{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-family:inherit;
  line-height:1.2;
  border:1px solid var(--hairline);
  background:var(--paper-raised);
  color:var(--ink-soft);
  padding:8px 16px;
  border-radius:20px;
  font-size:0.84rem;
  font-weight:500;
  cursor:pointer;
  transition:all 0.15s;
}
.filter-btn:hover{border-color:var(--paddy-light);color:var(--paddy);}
.filter-btn.active{background:var(--paddy);color:#fff;border-color:var(--paddy);}

.filter-row .export-btn{margin-left:16px;}

.filter-inputs{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.filter-inputs label{font-size:0.82rem;color:var(--ink-soft);}
.filter-inputs input[type="date"]{
  padding:8px 10px;
  border-radius:5px;
  border:1px solid var(--hairline);
  font-size:0.85rem;
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--ink);
  background:var(--paper-raised);
}
.filter-inputs button{
  padding:8px 20px;
  border-radius:20px;
  border:none;
  background:var(--paddy);
  color:#fff;
  font-weight:500;
  cursor:pointer;
  font-size:0.84rem;
}
.filter-inputs button:hover{background:#1c3a1f;}

/* ===== Tabel Log ===== */
.info-row{
  max-width:912px;
  margin:0 auto 14px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.export-btn{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  gap:8px;
  padding:7px 16px;
  border-radius:20px;
  border:1px solid var(--paddy);
  background:transparent;
  color:var(--paddy);
  font-family:inherit;
  font-size:0.84rem;
  font-weight:500;
  cursor:pointer;
  line-height:1.2;
  font-size:0.82rem;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;
  transition:background 0.15s, color 0.15s;
}
.export-btn:hover{background:var(--paddy);color:#fff;}
.export-btn:disabled{opacity:0.5;cursor:not-allowed;}
.filter-btn:focus-visible,
.export-btn:focus-visible{outline:2px solid var(--paddy-light);outline-offset:2px;}

.table-wrap{
  max-width:912px;
  margin:0 auto 40px;
  padding:0 24px;
}
table{width:100%;border-collapse:collapse;font-size:0.85rem;}
thead th{
  text-align:left;
  padding:10px 14px;
  color:var(--ink-soft);
  font-weight:500;
  font-size:0.78rem;
  border-bottom:1px solid var(--hairline);
}
thead th:first-child, tbody td:first-child{padding-left:0;}
tbody td{
  padding:12px 14px;
  border-bottom:1px solid var(--hairline);
  color:var(--ink);
}
tbody tr:last-child td{border-bottom:none;}
.empty-state{padding:36px 0;text-align:center;color:var(--ink-soft);font-size:0.9rem;}

#totalInfo{
  font-size:0.82rem;
  color:var(--ink-soft);
}

.pagination{
  max-width:912px;
  margin:0 auto 40px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
}
.page-btn{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  min-width:34px;
  height:34px;
  padding:0 8px;
  border-radius:8px;
  border:1px solid var(--hairline);
  background:var(--paper-raised);
  color:var(--ink-soft);
  font-family:inherit;
  font-size:0.82rem;
  font-weight:500;
  cursor:pointer;
  transition:all 0.15s;
}
.page-btn:hover:not([aria-disabled="true"]):not(:disabled){border-color:var(--paddy-light);color:var(--paddy);}
.page-btn.active{background:var(--paddy);color:#fff;border-color:var(--paddy);}
.page-btn:disabled,
.page-btn[aria-disabled="true"]{opacity:0.4;cursor:not-allowed;}
.page-btn:focus-visible{outline:2px solid var(--paddy-light);outline-offset:2px;}
.page-ellipsis{
  min-width:24px;
  text-align:center;
  color:var(--ink-soft);
  font-size:0.82rem;
}

@media (max-width:760px){
  .readings{grid-template-columns:repeat(2, 1fr);}
  .reading{border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);}
  .reading:nth-child(2n){border-right:none;}
  header.hero h1{font-size:1.6rem;}
  table{font-size:0.78rem;}
  .topbar-inner{flex-direction:column;align-items:flex-start;gap:12px;}
}