:root{
  --text:#101828; --muted:#475467; --line:#D0D5DD; --bg:#fff; --bg-soft:#F9FAFB;
}
*{box-sizing:border-box}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Helvetica Neue";
     color:var(--text); background:var(--bg); margin:0}
.wrap{max-width:1200px; margin:24px auto; padding:0 16px}

.toolbar{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px;
  background:var(--bg-soft); padding:12px; border:1px solid var(--line); border-radius:12px;
}
.toolbar label{font-size:14px; color:var(--muted)}
.toolbar select, .toolbar input{
  border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:#fff; font-size:14px;
}
.toolbar .pill{
  padding:6px 10px; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted)
}
.btn{ border:1px solid var(--line); background:#fff; color:#0C4A6E; padding:8px 12px; border-radius:10px; cursor:pointer }
.btn-primary{ background:#E0F2FE }

.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:12px}
table{border-collapse:collapse; width:100%}
th, td{border:1px solid #000; padding:6px 8px; font-size:12.5px; vertical-align:middle}
th{background:#F8FAFC; font-weight:600; text-align:center}
.head-month{font-size:14px; background:#F1F5F9}
.left-col{background:#F8FAFC; font-weight:600; white-space:nowrap}
.center{text-align:center}
.day-disabled{background:#FCFCFD; color:#98A2B3}
.cell-edit{ border:1px solid #000; background:#fff; }

/* Header styling per request */
.month-cell{ background:#3B82F6 !important; color:#fff !important; } /* blue for month-year */
.head-month.sticky-col, .head-month.sticky-col-2, .head-month.sticky-col-3{ background:#374151 !important; color:#fff !important; } /* dark gray left headers */
#thead tr:nth-child(2) th, #thead tr:nth-child(3) th{ border-color:#000 !important; } /* black border for day & date headers */
td.col-nama, td.col-off, td.col-nrp{ background:#E5E7EB; }

/* Status fills */
.off-cell{ background:#FF0000 !important; color:#FFFFFF !important; font-weight:700; }
.cuti-cell{ background:#FEF9C3 !important; color:#92400E !important; }
.ind-cell{ background:#DBEAFE !important; color:#1E3A8A !important; }
.west-cell{ background:#DCFCE7 !important; color:#065F46 !important; }

/* Header day issues */
.day-issue{ outline:2px solid #EF4444; outline-offset:-2px; }

/* Daily violation summary */
.viol-wrap{ margin:14px 0 20px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.viol-title{ font-weight:700; margin:0 0 8px 0; }
.viol-list{ margin:0; padding-left:18px; }
.viol-item{ margin:4px 0; }
.viol-day{ font-weight:600; }

/* Sticky columns */
.sticky-col{position:sticky; left:0; background:#fff; z-index:2}
.sticky-col-2{position:sticky; left:160px; background:#fff; z-index:2}
.sticky-col-3{position:sticky; left:270px; background:#fff; z-index:2}

/* Floating picker */
.area-picker{
  position:absolute; z-index:9999; border:1px solid var(--line); border-radius:8px; padding:6px 8px;
  background:#fff; font:inherit; box-shadow:0 8px 20px rgba(16,24,40,.12);
}

/* NRP select + duplicate highlight */
.nrp-select{ width:100%; border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:#fff; font:inherit; }
td.col-nrp.nrp-dup{ outline:2px solid #EF4444; outline-offset:-2px; }

@media print {
  .toolbar, .legend, .note, .viol-wrap{display:none !important}
  .table-wrap{border:none}
  th, td{font-size:10px; padding:4px 6px}
  .sticky-col, .sticky-col-2, .sticky-col-3{position:static}
  @page { size: A4 landscape; margin: 10mm; }
}

/* Bold duty (WB/2AN) pink fill */
.bold-duty{ background:#FCE7F3 !important; }

/* Cells outside selected range */
.out-of-range{ background:#F5F5F5 !important; color:#9CA3AF !important; }
.out-of-range[contenteditable="true"]{ pointer-events:none; }
.out-of-range::selection{ background:transparent; }