*{box-sizing:border-box}
body{margin:0;background:#eef1f5;color:#111;font-family:Arial,Helvetica,sans-serif;font-size:14px}
.app{max-width:1550px;margin:auto;padding:18px}.toolbar{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:14px}
h1{margin:0;font-size:24px}.subtitle{color:#666;margin-top:3px}.actions{display:flex;gap:7px;flex-wrap:wrap}
button{border:1px solid #bbb;background:#fff;border-radius:6px;padding:9px 12px;cursor:pointer}button.primary{background:#174ea6;color:white;border-color:#174ea6}.danger{color:#b42318}
.controls{display:grid;grid-template-columns:1.2fr 1fr 1.5fr 1fr .75fr .9fr .9fr .9fr;gap:9px;background:#fff;border:1px solid #ddd;border-radius:10px;padding:13px;margin-bottom:15px}
.field label{display:block;font-size:12px;color:#555;margin-bottom:4px}.field input,.field select{width:100%;height:36px;border:1px solid #bbb;border-radius:5px;padding:5px 8px;font-size:14px}
.print-title{background:#fff;border:1px solid #aaa;padding:9px 13px;margin-bottom:8px}.gov{text-align:right;font-size:11px;font-weight:bold}.print-title h2{text-align:center;margin:3px 0 9px;font-size:16px}
.employee-line{display:flex;justify-content:space-between;gap:25px;font-size:11px;margin:3px 0}.account-page{display:grid;grid-template-columns:1.55fr 1fr;gap:9px}
.page-half{background:#fff;border:1px solid #444;min-height:680px}.section-heading{text-align:center;font-weight:bold;font-size:12px;padding:6px;border-bottom:1px solid #444}
table{border-collapse:collapse;width:100%;table-layout:fixed}th,td{border:1px solid #555;padding:4px;text-align:center;vertical-align:middle}
thead th{font-size:10px;background:#fafafa}.colno th{font-size:9px;font-weight:normal}
tbody tr{height:47px}td input{width:100%;border:0;background:transparent;text-align:center;font:inherit;outline:none}
td input.datebox{font-size:11px}td input.remarks{text-align:left}.calc{font-weight:bold;background:#fafafa}.credit{font-weight:bold}.bad{color:#b42318}
.delete{border:0;background:#fff;color:#b42318;font-size:17px;padding:0;cursor:pointer}.table-note{font-size:9px;color:#666;padding:7px;line-height:1.4}
.summary{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}.summary>div{background:#fff;border:1px solid #ddd;border-radius:7px;padding:8px}.summary span{display:block;font-size:10px;color:#666}.summary b{font-size:16px}.summary .final{border:2px solid #174ea6}
.print-footer{display:none}
@media(max-width:1000px){.controls{grid-template-columns:repeat(2,1fr)}.account-page{grid-template-columns:1fr}.page-half{min-height:auto}.toolbar{flex-direction:column;align-items:flex-start}}
@media print{
 @page{size:A4 landscape;margin:7mm}
 body{background:#fff;font-size:9px}.app{padding:0;max-width:none}.no-print{display:none!important}
 .print-title{border:0;margin:0 0 3mm;padding:0}.print-title h2{font-size:13px}.employee-line{font-size:8px}
 .account-page{grid-template-columns:1.55fr 1fr;gap:3mm}.page-half{min-height:178mm;border:1px solid #000}
 .section-heading{font-size:9px;padding:3px}th,td{padding:2px;font-size:7px}thead th{font-size:7px}
 tbody tr{height:28px}.table-note{font-size:6.5px}.print-footer{display:flex;justify-content:space-between;font-size:6.5px;margin-top:2mm}
}

.right-controls{display:flex;gap:7px;padding:6px;border-bottom:1px solid #444;background:#fafafa}
.right-controls button{padding:6px 9px}
#leaveTable td input,#leaveTable td select{width:100%;border:0;background:transparent;text-align:center;font:inherit;outline:none}
#leaveTable td input.datebox{font-size:11px}
#leaveTable td input.remarks{text-align:left}
.entry-delete{border:0;background:transparent;color:#b42318;font-size:17px;cursor:pointer}
@media print{
 .right-controls{display:none!important}
}

.chronology-note{background:#fff8e1;border:1px solid #e6c85c;border-radius:6px;padding:7px 10px;margin:-8px 0 10px;font-size:12px;color:#5f4b00}

.credit,.balance,.entry-balance{white-space:nowrap}

.formula-note{background:#eef7ff;border:1px solid #b7d7f5;border-radius:6px;padding:7px 10px;margin:-5px 0 10px;font-size:12px;color:#16466b}

.non-duty-cell{vertical-align:top;min-width:170px}
.non-duty-list{display:flex;flex-direction:column;gap:3px}
.non-duty-row{display:grid;grid-template-columns:1fr auto 1fr auto auto;align-items:center;gap:2px;margin-bottom:2px}
.non-duty-row input{min-width:0;font-size:10px!important}
.nd-days{font-size:9px;white-space:nowrap;color:#555}
.nd-delete{border:0;background:transparent;color:#b42318;cursor:pointer;padding:0 2px;font-size:13px}
.add-nd{font-size:10px;padding:3px 5px;margin-top:3px}
@media print{
 .non-duty-cell{min-width:0}.add-nd,.nd-delete{display:none!important}
 .non-duty-row{grid-template-columns:1fr auto 1fr auto}
 .nd-days{font-size:7px}
}

.formula-note{background:#eef7ff;border:1px solid #b7d7f5;border-radius:6px;padding:7px 10px;margin:-5px 0 10px;font-size:12px;color:#16466b}
.credit,.balance,.entry-balance{white-space:nowrap}

.nd-header-note{font-weight:normal;font-size:8px;color:#666;margin-top:2px}
.nd-live-total{font-size:9px;font-weight:bold;text-align:left;margin-bottom:3px;padding:2px 3px;border-bottom:1px dotted #aaa}

.non-duty-row{
  display:grid;
  grid-template-columns:auto minmax(82px,1fr) auto minmax(82px,1fr) auto auto;
  align-items:center;
  gap:3px;
  margin-bottom:3px;
}
.nd-label{
  font-size:8px;
  color:#555;
  font-weight:bold;
}
.non-duty-row .nd-from,
.non-duty-row .nd-to{
  display:block;
  width:100%;
  min-width:0;
  border:1px solid #bbb;
  border-radius:3px;
  background:#fff;
  padding:2px 3px;
  font-size:9px!important;
}
.nd-days{font-size:8px;white-space:nowrap;color:#555}
@media print{
  .non-duty-row{
    grid-template-columns:auto minmax(40px,1fr) auto minmax(40px,1fr) auto;
  }
  .nd-label{font-size:6px}
  .non-duty-row .nd-from,.non-duty-row .nd-to{font-size:6px!important;border:0;padding:0}
  .nd-days{font-size:6px}
}