/* ============================================================
   DRYER PANEL — HMI STYLESHEET (versi sidebar)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg-void:#0B0F14;
  --bg-panel:#141A21;
  --bg-panel-raised:#1B232C;
  --bg-sidebar:#10151B;
  --border-line:#262F39;
  --border-line-soft:#1E262E;
  --text-primary:#E7EDF3;
  --text-muted:#7C8896;
  --text-dim:#4E5964;
  --accent-heat:#FF7A29;
  --accent-heat-dim:#5A3822;
  --accent-leaf:#8BC34A;
  --accent-leaf-dim:#3A4A2A;
  --accent-danger:#FF4757;
  --accent-danger-dim:#4A2429;
  --led-off:#3A4249;
  --radius:11px;
  --radius-sm:7px;
  --shadow-panel:0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.02);
  --sidebar-w:236px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 70% -10%, #171F28 0%, var(--bg-void) 60%);
  color:var(--text-primary);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------------- APP SHELL ---------------- */
.app-shell{display:flex;min-height:100vh;}

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--bg-sidebar);
  border-right:1px solid var(--border-line);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;
  transition:transform .25s ease;
  z-index:100;
}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:20px 18px;border-bottom:1px solid var(--border-line-soft);
}
.sidebar-brand img{height:34px;width:34px;object-fit:cover;border-radius:8px;}
.sidebar-brand .name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;line-height:1.2;}
.sidebar-brand .sub{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--text-muted);letter-spacing:.08em;}

.nav{flex:1;padding:14px 10px;}
.nav a{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;margin-bottom:4px;border-radius:var(--radius-sm);
  color:var(--text-muted);text-decoration:none;
  font-family:'Rajdhani',sans-serif;font-weight:600;font-size:15px;letter-spacing:.02em;
  border:1px solid transparent;
}
.nav a .ic{width:18px;text-align:center;font-size:15px;}
.nav a:hover{background:var(--bg-panel-raised);color:var(--text-primary);}
.nav a.active{
  background:linear-gradient(180deg,rgba(255,122,41,.14),rgba(255,122,41,.05));
  border-color:var(--accent-heat-dim);color:var(--accent-heat);
}

.sidebar-foot{
  padding:14px 16px;border-top:1px solid var(--border-line-soft);
}
.sidebar-user{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-muted);
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent-leaf);box-shadow:0 0 6px var(--accent-leaf);}

.main{
  flex:1;
  margin-left:var(--sidebar-w);
  padding:18px 22px 50px;
  max-width:860px;
}

.topbar-mobile{
  display:none;
  align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.hamburger{
  background:var(--bg-panel-raised);border:1px solid var(--border-line);
  color:var(--text-primary);border-radius:var(--radius-sm);
  padding:9px 13px;font-size:16px;cursor:pointer;
}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;}

@media (max-width: 880px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;padding:16px 16px 50px;}
  .topbar-mobile{display:flex;}
  .sidebar-backdrop.show{display:block;}
}

/* ---------------- PANEL ---------------- */
.panel{
  position:relative;
  background:linear-gradient(180deg,var(--bg-panel-raised),var(--bg-panel));
  border:1px solid var(--border-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-panel);
  padding:14px 16px;
  margin-bottom:10px;
}
.panel::before,.panel::after{
  content:"";position:absolute;top:7px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#4A555F,#161C22);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.6);
}
.panel::before{left:7px;}
.panel::after{right:7px;}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.13em;
  color:var(--text-muted);text-transform:uppercase;margin:0 0 4px;
}
.h1{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:19px;letter-spacing:.02em;margin:0 0 1px;color:var(--text-primary);}

/* ---------------- BUTTONS ---------------- */
.btn{
  font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.05em;font-size:13.5px;
  padding:9px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-line);
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;justify-content:center;
  color:var(--text-primary);background:var(--bg-panel-raised);transition:filter .15s, transform .05s;
}
.btn:active{transform:translateY(1px);}
.btn:hover{filter:brightness(1.12);}
.btn-primary{background:linear-gradient(180deg,#FF8A3D,var(--accent-heat));border-color:#a3521c;color:#1a0e04;}
.btn-danger{background:linear-gradient(180deg,#FF6370,var(--accent-danger));border-color:#8a1c26;color:#2a0407;}
.btn-leaf{background:linear-gradient(180deg,#9ED45F,var(--accent-leaf));border-color:#4c6b28;color:#0e1a05;}
.btn-ghost{background:transparent;border-color:var(--border-line);color:var(--text-muted);}
.btn-block{width:100%;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn.small{padding:6px 10px;font-size:11.5px;}

/* ---------------- STATUS GRID ---------------- */
.statusgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;}
.stat{background:var(--bg-void);border:1px solid var(--border-line-soft);border-radius:var(--radius-sm);padding:10px;text-align:center;}
.stat-label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
.stat-value{font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:600;color:var(--text-primary);}
.stat-value.heat{color:var(--accent-heat);}
.stat-value.leaf{color:var(--accent-leaf);}
.led-row{display:flex;align-items:center;justify-content:center;gap:6px;}
.led{width:8px;height:8px;border-radius:50%;background:var(--led-off);}
.led.on{background:var(--accent-leaf);box-shadow:0 0 8px var(--accent-leaf);}
.led.off{background:var(--accent-danger);box-shadow:0 0 8px var(--accent-danger);}

/* ---------------- GAUGE ---------------- */
.gauge-wrap{display:flex;flex-direction:column;align-items:center;padding:2px 0 0;}
.gauge-wrap svg{width:210px;height:114px;}
.gauge-readout{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text-muted);margin-top:0;}
.gauge-readout b{color:var(--text-primary);font-size:14px;}

/* ---------------- TIMER ---------------- */
.timer-shell{background:#05070A;border:1px solid var(--border-line);border-radius:var(--radius-sm);padding:12px 8px;text-align:center;margin-top:2px;}
.timer-digits{font-family:'IBM Plex Mono',monospace;font-size:34px;font-weight:600;letter-spacing:.03em;color:var(--text-dim);transition:color .3s, text-shadow .3s;}
.timer-digits.live{color:var(--accent-heat);text-shadow:0 0 14px rgba(255,122,41,.45);}
.timer-digits.done{color:var(--accent-leaf);text-shadow:0 0 14px rgba(139,195,74,.45);}
.phase-label{font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:.06em;font-size:12px;color:var(--text-muted);margin-top:5px;text-transform:uppercase;}
.progress-track{height:6px;background:#05070A;border-radius:8px;overflow:hidden;margin-top:8px;border:1px solid var(--border-line-soft);}
.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent-heat-dim),var(--accent-heat));transition:width .6s;}

/* ---------------- FORM ---------------- */
.field{margin-bottom:10px;}
.field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
.field input,.field select,.input{
  width:100%;padding:8px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--border-line);background:var(--bg-void);
  color:var(--text-primary);font-family:'IBM Plex Mono',monospace;font-size:13.5px;
}
.field input:focus,.field select:focus,.input:focus{outline:none;border-color:var(--accent-heat);box-shadow:0 0 0 3px rgba(255,122,41,.15);}
.hms-row{display:flex;gap:5px;}
.hms-row input{text-align:center;}

/* ---------------- TOGGLE SWITCH (fan/heater manual) ---------------- */
.switch-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border-line-soft);}
.switch-row:last-child{border-bottom:none;}
.switch-label{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:13.5px;}
.switch{position:relative;width:42px;height:23px;background:#2a323b;border-radius:20px;cursor:pointer;border:1px solid var(--border-line);transition:background .2s;}
.switch.on{background:var(--accent-leaf-dim);border-color:var(--accent-leaf);}
.switch .knob{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#8b95a1;transition:transform .2s, background .2s;}
.switch.on .knob{transform:translateX(19px);background:var(--accent-leaf);}

.mode-toggle{display:flex;gap:6px;background:var(--bg-void);padding:4px;border-radius:var(--radius-sm);border:1px solid var(--border-line-soft);}
.mode-toggle button{
  flex:1;padding:8px;border:none;border-radius:6px;background:transparent;color:var(--text-muted);
  font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.05em;cursor:pointer;font-size:12.5px;
}
.mode-toggle button.active{background:var(--accent-heat);color:#1a0e04;}

/* ---------------- KONTROL: status sesi & blok manual ---------------- */
.session-status{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--text-muted);
}
.manual-block{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border-line-soft);
  transition:opacity .2s;
}
.badge-cooling{background:#1E3A4A;color:#5CC6E8;}

/* ---------------- LOGIN ---------------- */
.login-outer{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{width:100%;max-width:340px;text-align:center;}
.login-card img{height:96px;margin-bottom:10px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));}
.login-card .h1{font-size:22px;margin-bottom:18px;}
.err-box{margin-top:12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--accent-danger-dim);border:1px solid #6b2732;color:#ffb3ba;font-size:13px;font-family:'IBM Plex Mono',monospace;}

/* ---------------- TABLE ---------------- */
.table-wrap{overflow-x:auto;}
table.logbook{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:12px;}
table.logbook th{text-align:left;padding:8px 10px;color:var(--text-muted);font-size:10px;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--border-line);}
table.logbook td{padding:8px 10px;border-bottom:1px solid var(--border-line-soft);color:var(--text-primary);}
table.logbook tr:hover td{background:rgba(255,255,255,.02);}
.badge{padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;letter-spacing:.04em;}
.badge-RUNNING{background:var(--accent-heat-dim);color:var(--accent-heat);}
.badge-DONE{background:var(--accent-leaf-dim);color:var(--accent-leaf);}
.badge-STOPPED, .badge-IDLE{background:#2a323b;color:var(--text-muted);}
.link{color:var(--accent-heat);text-decoration:none;font-weight:600;}
.link:hover{text-decoration:underline;}
.empty-note{text-align:center;color:var(--text-muted);padding:30px 10px;font-family:'IBM Plex Mono',monospace;font-size:13px;}

canvas{background:var(--bg-void);border:1px solid var(--border-line-soft);border-radius:var(--radius-sm);padding:10px;}

/* ---------------- FILTER & PAGER (Riwayat Sesi) ---------------- */
.filter-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px;
}
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.pager-info{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-muted);
}

.row-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;}
.mt-16{margin-top:10px;}
.center{text-align:center;}

/* ---------------- KONTROL VIEWPORT (semua card muat tanpa scroll layar) ---------------- */
.kontrol-viewport{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto 1fr;
  gap:10px;
  height:calc(100vh - 76px);
}
.kontrol-viewport .panel{
  margin-bottom:0;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.kontrol-viewport .span2{grid-column:1 / -1;}
.kontrol-viewport .table-wrap{flex:1;overflow-y:auto;}
.kontrol-viewport .table-wrap::-webkit-scrollbar{width:7px;}
.kontrol-viewport .table-wrap::-webkit-scrollbar-track{background:var(--bg-void);border-radius:8px;}
.kontrol-viewport .table-wrap::-webkit-scrollbar-thumb{background:var(--border-line);border-radius:8px;}

@media (max-width:880px){
  .kontrol-viewport{
    display:block;
    height:auto;
  }
  .kontrol-viewport .panel{
    margin-bottom:10px;
    overflow:visible;
  }
}