:root{
  --navy:#122A44;
  --navy-2:#1B3A5C;
  --bg:#EEF2F5;
  --panel:#FFFFFF;
  --ink:#16212E;
  --ink-soft:#5B6B7A;
  --line:#D7DEE4;

  --duty-bg:#E1F3E4;
  --duty-card:#BFE6C6;
  --duty-strong:#2E8B4F;

  --toilet-bg:#DCEEFB;
  --toilet-card:#AFDBF5;
  --toilet-strong:#2E7BB0;

  --break-bg:#FCE9DE;
  --break-card:#F5C6A8;
  --break-strong:#C6632D;

  --material-bg:#FBF1D9;
  --material-card:#F0DBA2;
  --material-strong:#B4842A;

  --wait-bg:#F1E4F5;
  --wait-card:#DCC0E6;
  --wait-strong:#8A4FA3;

  --testing-bg:#DDF3F0;
  --testing-card:#A8DED4;
  --testing-strong:#1F8A76;

  --loan-bg:#E7E9F7;
  --loan-card:#C2C7EC;
  --loan-strong:#4B4FA0;

  --danger:#B23A3A;
  --radius:14px;
  --radius-sm:8px;
  --mono: "SFMono-Regular", Consolas, "Roboto Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  overscroll-behavior:none;
}

#app{
  display:grid;
  grid-template-columns:1fr 320px;
  grid-template-rows:auto 1fr;
  height:100vh;
  gap:0;
}

/* ---------------- TOPBAR ---------------- */
.topbar{
  grid-column:1 / span 2;
  background:var(--navy);
  color:#fff;
  padding:14px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:4px solid var(--navy-2);
}
.topbar-left h1{
  margin:0 0 6px 0;
  font-size:20px;
  letter-spacing:.2px;
  font-weight:700;
}
.mo-list{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.mo-chip{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:5px 12px;
  font-size:13px;
  font-family:var(--mono);
}
.mo-chip.hold{ border-color:#E2A15B; color:#F4CFA0; }
.mo-chip.progress{ border-color:#6FCF97; color:#B7EACB; }

.topbar-right{
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.btn-login-top{
  background:#fff;
  color:var(--navy);
  border:none;
  padding:12px 20px;
  font-size:15px;
  font-weight:700;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.btn-login-top:active{ transform:scale(.97); }
.group-info{ font-size:14px; opacity:.85; margin-bottom:4px;}
.clock{ font-family:var(--mono); font-size:26px; font-weight:700; letter-spacing:1px;}

/* ---------------- BOARD ---------------- */
.board{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  padding:16px;
  overflow-y:auto;
}
.lane{
  background:var(--panel);
  border-radius:var(--radius);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  min-height:260px;
  overflow:hidden;
}
.lane-head{
  padding:12px 14px;
  font-weight:700;
  font-size:14px;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.lane-head .count{
  background:rgba(255,255,255,.25);
  border-radius:999px;
  min-width:24px;
  text-align:center;
  padding:2px 7px;
  font-size:12px;
  font-family:var(--mono);
}
.lane-body{
  flex:1;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow-y:auto;
}
.lane-empty{
  color:var(--ink-soft);
  font-size:13px;
  text-align:center;
  margin-top:14px;
  opacity:.6;
}

.lane[data-lane="On Duty"] .lane-head{ background:var(--duty-strong); }
.lane[data-lane="On Duty"] .lane-body{ background:var(--duty-bg); }
.lane[data-lane="Ke Toilet"] .lane-head{ background:var(--toilet-strong); }
.lane[data-lane="Ke Toilet"] .lane-body{ background:var(--toilet-bg); }
.lane[data-lane="Istirahat"] .lane-head{ background:var(--break-strong); }
.lane[data-lane="Istirahat"] .lane-body{ background:var(--break-bg); }
.lane[data-lane="Shalat"] .lane-head{ background:var(--break-strong); }
.lane[data-lane="Shalat"] .lane-body{ background:var(--break-bg); }
.lane[data-lane="Menunggu Perbaikan"] .lane-head{ background:var(--material-strong); }
.lane[data-lane="Menunggu Perbaikan"] .lane-body{ background:var(--material-bg); }
.lane[data-lane="Menunggu Material"] .lane-head{ background:var(--wait-strong); }
.lane[data-lane="Menunggu Material"] .lane-body{ background:var(--wait-bg); }
.lane[data-lane="Menunggu Testing"] .lane-head{ background:var(--testing-strong); }
.lane[data-lane="Menunggu Testing"] .lane-body{ background:var(--testing-bg); }
.lane[data-lane="Dipinjam ke Routing Lain"] .lane-head{ background:var(--loan-strong); }
.lane[data-lane="Dipinjam ke Routing Lain"] .lane-body{ background:var(--loan-bg); }

.op-card{
  background:#fff;
  border-radius:var(--radius-sm);
  padding:10px 12px;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  cursor:pointer;
  border-left:5px solid var(--ink-soft);
  transition:transform .08s ease;
}
.op-card:active{ transform:scale(.97); }
.op-card .name{ font-weight:700; font-size:14.5px; }
.loan-note{
  font-size:10.5px;
  color:var(--loan-strong);
  font-weight:700;
  margin-top:3px;
}
.op-card .meta{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--ink-soft);
  margin-top:3px;
  display:flex;
  justify-content:space-between;
}
.lane[data-lane="On Duty"] .op-card{ border-left-color:var(--duty-strong); }
.lane[data-lane="Ke Toilet"] .op-card{ border-left-color:var(--toilet-strong); }
.lane[data-lane="Istirahat"] .op-card{ border-left-color:var(--break-strong); }
.lane[data-lane="Shalat"] .op-card{ border-left-color:var(--break-strong); }
.lane[data-lane="Menunggu Perbaikan"] .op-card{ border-left-color:var(--material-strong); }
.lane[data-lane="Menunggu Material"] .op-card{ border-left-color:var(--wait-strong); }
.lane[data-lane="Menunggu Testing"] .op-card{ border-left-color:var(--testing-strong); }
.lane[data-lane="Dipinjam ke Routing Lain"] .op-card{ border-left-color:var(--loan-strong); }

.op-card.helper{ border-left-style:dashed; }

.op-card.overdue{
  border:2px solid var(--danger);
  box-shadow:0 0 0 3px rgba(178,58,58,.15);
  animation:overdue-pulse 2s infinite;
}
@keyframes overdue-pulse{
  0%, 100% { box-shadow:0 0 0 3px rgba(178,58,58,.15); }
  50% { box-shadow:0 0 0 6px rgba(178,58,58,.05); }
}
.overdue-note{
  font-size:10.5px;
  color:var(--danger);
  font-weight:700;
  margin-top:4px;
}
.overtime-note-board{
  font-size:10.5px;
  color:var(--toilet-strong);
  font-weight:700;
  margin-top:4px;
}
.helper-tag{
  display:inline-block;
  font-size:9.5px;
  font-weight:700;
  background:var(--wait-bg);
  color:var(--wait-strong);
  padding:1px 6px;
  border-radius:999px;
  vertical-align:middle;
  margin-left:4px;
}
.helper-title{ background:var(--wait-bg) !important; color:var(--wait-strong) !important; }
.member-row.helper-row{ background:var(--wait-bg); }
.member-row.helper-row .dot{ background:var(--wait-strong); }

/* ---------------- SIDEBAR ---------------- */
.sidebar{
  background:var(--panel);
  border-left:1px solid var(--line);
  padding:16px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}
.sidebar-header{
  font-weight:700;
  font-size:14px;
  margin-bottom:12px;
  color:var(--ink-soft);
}
.member-group-title{
  font-weight:700;
  font-size:13px;
  background:var(--material-bg);
  color:var(--material-strong);
  padding:6px 10px;
  border-radius:6px;
  margin:12px 0 8px 0;
}
.member-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 8px;
  border-radius:8px;
  margin-bottom:4px;
}
.member-row.on{ background:var(--duty-bg); }
.member-row .dot{
  width:10px;height:10px;border-radius:50%;
  background:#C6CDD3;
  flex:0 0 auto;
}
.member-row.on .dot{ background:var(--duty-strong); }
.member-row .nm{ font-size:14px; font-weight:600; }
.member-row .st{
  margin-left:auto;
  font-size:11px;
  color:var(--ink-soft);
  font-family:var(--mono);
}
.admin-link{
  text-align:center;
  padding:10px;
  font-size:12px;
  color:var(--ink-soft);
  text-decoration:none;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.admin-link:first-of-type{ margin-top:auto; }
.switch-link{
  background:none;
  border:none;
  border-top:1px solid var(--line);
  width:100%;
  cursor:pointer;
  font-family:inherit;
  color:var(--danger);
  font-weight:700;
}

/* ---------------- MODALS ---------------- */
.modal-backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(10,18,28,.55);
  z-index:300;
  align-items:center;
  justify-content:center;
}
.modal-backdrop.open{ display:flex; }
.modal{
  background:#fff;
  border-radius:18px;
  padding:24px;
  width:100%;
  max-width:420px;
  max-height:88vh;
  overflow-y:auto;
}
.modal-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:16px;
  text-align:center;
}
.modal-cancel{
  width:100%;
  margin-top:16px;
  padding:14px;
  border:none;
  background:#EEF1F4;
  color:var(--ink-soft);
  font-weight:700;
  border-radius:12px;
  font-size:15px;
}

/* keypad */
.nik-display{
  text-align:center;
  font-family:var(--mono);
  font-size:32px;
  letter-spacing:4px;
  background:#F4F6F8;
  border-radius:12px;
  padding:14px;
  margin-bottom:6px;
  min-height:60px;
}
.nik-error{
  color:var(--danger);
  text-align:center;
  font-size:13px;
  min-height:18px;
  margin-bottom:8px;
}
.keypad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.key{
  padding:20px 0;
  font-size:22px;
  font-weight:700;
  border:none;
  border-radius:12px;
  background:#F4F6F8;
  color:var(--ink);
}
.key:active{ background:#E5E9EC; }
.key-ok{ background:var(--duty-strong); color:#fff; }
.key-clear{ background:#FBE3E3; color:var(--danger); font-size:15px; }

/* mo select */
.mo-hello{
  text-align:center;
  color:var(--ink-soft);
  font-size:14px;
  margin-bottom:14px;
}
.mo-option{
  width:100%;
  text-align:left;
  padding:16px;
  border-radius:12px;
  border:2px solid var(--line);
  background:#fff;
  margin-bottom:10px;
  font-size:15px;
}
.mo-option .mo-top{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px;
  font-weight:800;
  font-size:17px;
  line-height:1.25;
}
.mo-option .mo-sn{ color:var(--ink); }
.mo-option .mo-so{ font-family:var(--mono); color:var(--ink); }
.mo-option .mo-project{
  color:var(--ink-soft);
  font-size:13px;
  margin-top:4px;
}
.mo-option .mo-project-code{ font-weight:600; color:var(--ink); }
.mo-option .mo-footer{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
}
.mo-option .mo-num{
  font-family:var(--mono);
  font-weight:500;
  font-size:12px;
  color:var(--ink-soft);
}
.mo-option .mo-status{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:999px;
}
.mo-option .mo-status.progress{ background:var(--duty-bg); color:var(--duty-strong); }
.mo-option .mo-status.hold{ background:var(--break-bg); color:var(--break-strong); }

/* activity picker */
.activity-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.act-btn{
  padding:18px 10px;
  border-radius:14px;
  border:none;
  font-size:14.5px;
  font-weight:700;
  color:#fff;
  min-height:64px;
}
.act-btn:active{ filter:brightness(.92); }
.act-btn.resume{ grid-column:1 / span 2; background:var(--duty-strong); font-size:16px;}
.act-btn.toilet{ background:var(--toilet-strong); }
.act-btn.break{ background:var(--break-strong); }
.act-btn.material{ background:var(--material-strong); }
.act-btn.wait{ background:var(--wait-strong); }
.act-btn.testing{ background:var(--testing-strong); }
.act-btn.end{ background:var(--danger); grid-column:1 / span 2; }
.act-btn.mo-done{ background:var(--navy); grid-column:1 / span 2; }

/* toast */
.toast{
  position:fixed;
  left:50%; bottom:30px;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);
  color:#fff;
  padding:12px 20px;
  border-radius:10px;
  font-size:14px;
  opacity:0;
  transition:all .25s ease;
  z-index:200;
  pointer-events:none;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error{ background:var(--danger); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1300px){
  .board{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:900px){
  #app{ grid-template-columns:1fr; }
  .sidebar{
    display:none;
  }
  .board{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:260px;
  }
}
@media (max-width:520px){
  .board{ grid-template-columns:1fr; }
}