*{box-sizing:border-box}body{margin:0;background:#f2f5f1;color:#1b352e;font:15px system-ui,-apple-system}button,input,select,textarea{font:inherit}button{border:0;padding:12px 17px;border-radius:11px;cursor:pointer;background:#1e5943;color:white;white-space:nowrap}button.secondary{background:#e7ede7;color:#244c3e}button.danger{background:#fbede8;color:#a0442e}button:disabled{opacity:.5;cursor:wait}input,select,textarea{padding:12px;width:100%;border:1px solid #d1ded5;border-radius:9px;color:#1b352e;background:#fff;margin:6px 0 16px}textarea{resize:vertical}label{display:block;font-size:13px;color:#61786a}h1,h2,h3{margin-top:0}a{color:#276c50}small,.muted{color:#6b8074}.muted{line-height:1.7}.brand{font-size:28px;font-weight:700;letter-spacing:-1px}.eyebrow{font-size:11px;letter-spacing:1.4px;color:#6c8674;font-weight:650}#loginview{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-brand{background:#14372e;color:white;padding:11vh 10%;display:flex;flex-direction:column;justify-content:center}.login-brand h1{font-size:44px;line-height:1.5;margin:55px 0 20px}.login-brand p{color:#adcbba}.offcards{display:flex;gap:18px;margin-top:36px}.offcards span{border:1px solid #527062;border-radius:15px;padding:20px;line-height:1.8}.login-card{max-width:460px;width:100%;margin:auto;padding:45px 24px}.login-card h2{font-size:25px;margin-top:15px}.wide{width:100%}details{margin-top:22px}summary{cursor:pointer;color:#587562}.password-field{position:relative}.password-field input{padding-right:60px}.eye{position:absolute;right:6px;top:12px;padding:8px 11px}.eye[aria-pressed=true]{background:#c9dfc1}#app{display:grid;grid-template-columns:235px 1fr;min-height:100vh}#app[hidden]{display:none}aside{background:#14372e;color:white;padding:32px 23px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}aside small{color:#9fbca8;font-size:10px;letter-spacing:1.5px;margin:8px 0 42px}#nav{display:flex;flex-direction:column;gap:7px}#nav button{background:transparent;color:#c0d4c7;text-align:left;padding:14px}#nav button.active{background:#315b46;color:white}.sidebarfoot{margin-top:auto;display:grid;gap:13px;font-size:13px}.shell{min-width:0;padding:34px 4%}header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:30px}header h1{font-size:29px;margin:7px 0}.headercontrols{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.headercontrols select,.headercontrols input{width:auto;margin:0;padding:10px;max-width:200px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.stat,.panel{background:white;border:1px solid #dce6dc;border-radius:17px;padding:24px}.stat span{color:#728775;font-size:13px}.stat strong{display:block;font-size:28px;margin-top:12px;font-weight:650}.stat.accent{background:#e6edda}.panel{margin-bottom:20px}.panelhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.panelhead h2{font-size:20px;margin:0}.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.row>*{flex:1;min-width:140px}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button{font-size:13px;padding:9px 13px}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}th{font-size:12px;font-weight:500;color:#738876;background:#f5f7f3}th,td{padding:15px 12px;border-bottom:1px solid #e9eee6}td select,td input{margin:0;min-width:130px;padding:8px}.tag{display:inline-block;border-radius:7px;padding:5px 9px;background:#edf2e8;color:#4b6c4e;font-size:11px}.tag.warn{background:#fff0df;color:#a06522}.tag.red{background:#fae7e4;color:#a34b37}.empty{text-align:center;color:#728775;padding:50px 15px}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.day{background:#f6f8f3;border-radius:10px;padding:12px;min-height:75px}.day strong{display:block}.day span{display:block;font-size:11px;margin-top:5px;color:#587261}.day.absent,.day.unpaid_leave{background:#fcece7}.day.holiday,.day.weekly_off{background:#e7eeda}.day.paid_leave{background:#e2efee}.day.unmarked{background:#fff5df}.profile{display:flex;gap:22px;align-items:center}.avatar{width:92px;height:92px;border-radius:20px;object-fit:cover;background:#e3eadf;display:grid;place-items:center;font-size:32px}.detailgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}.detailgrid small{display:block;margin-bottom:5px}.balance{background:#f2f7ee;padding:18px;border-radius:12px}.checkdates{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:280px;overflow:auto}.checkdates label{display:flex;align-items:center;gap:6px;background:#f2f5ef;padding:9px;border-radius:8px}.checkdates input{width:auto;margin:0}.notice{background:#fff4de;color:#846231;border-radius:10px;padding:13px;margin-bottom:15px;font-size:13px;line-height:1.7}dialog{border:0;border-radius:20px;max-width:740px;width:94%;max-height:92vh;padding:28px}dialog::backdrop{background:#14372eb8}.modalhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:22px}.modalhead h2{margin:0;font-size:22px}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:90%;border-radius:12px;background:#193b30;color:white;padding:14px 22px;display:none;z-index:12}.chatlayout{display:grid;grid-template-columns:220px 1fr;gap:18px}.contacts button{display:block;text-align:left;width:100%;margin-bottom:8px;background:#edf2e9;color:#234535}.contacts button.selected{background:#cee1c2}.chatbox{min-width:0}.messages{height:390px;overflow:auto;display:flex;flex-direction:column;gap:12px;background:#f5f7f2;border-radius:12px;padding:18px}.bubble{background:white;border:1px solid #e2e9dd;border-radius:13px;padding:12px 15px;max-width:85%;align-self:flex-start;white-space:pre-wrap;overflow-wrap:anywhere}.bubble.mine{align-self:flex-end;background:#dfebd3}.bubble small{display:block;font-size:10px;margin-top:8px}.bubble audio{max-width:100%;width:270px}.compose{margin-top:14px;display:flex;gap:8px;align-items:center}.compose textarea{margin:0;min-height:48px}.recording{background:#b44332}footer{font-size:12px;color:#7b8f7e;margin:25px 0}button:focus-visible{outline:3px solid #a6ce8a}@media(max-width:1000px){#app{grid-template-columns:190px 1fr}.stats{grid-template-columns:repeat(2,1fr)}header{align-items:start;flex-direction:column}.shell{padding:25px}aside{padding:28px 15px}.detailgrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){#loginview{display:block}.login-brand{padding:28px}.login-brand h1{font-size:29px;margin:25px 0}.offcards{margin-top:15px}.offcards span{padding:12px}.login-card{padding-top:32px}#app{display:block}aside{height:auto;position:static;padding:18px}aside small{display:none}#nav{flex-direction:row;overflow:auto;margin-top:16px}#nav button{white-space:nowrap;padding:9px 12px}.sidebarfoot{margin-top:12px;display:flex;align-items:center;justify-content:space-between}.shell{padding:20px 14px}.headercontrols{gap:7px}.headercontrols select{max-width:150px}.stat,.panel{padding:17px}.stat strong{font-size:23px}.detailgrid{grid-template-columns:repeat(2,1fr)}.calendar{gap:4px}.day{padding:6px;min-height:63px}.day span{font-size:9px}.chatlayout{grid-template-columns:1fr}.contacts{display:flex;overflow:auto;gap:8px}.contacts button{min-width:140px;width:auto}.messages{height:350px}.compose{flex-wrap:wrap}.compose textarea{flex-basis:100%}.checkdates{grid-template-columns:repeat(2,1fr)}}@media print{aside,header,.actions,footer,button{display:none!important}#app{display:block}.shell{padding:0}.panel{border:0}.tablewrap{overflow:visible}}

#loginview[hidden]{display:none}
/* Month grid: Sunday first, aligned dates, accessible status text. */
.calendar,.calendar-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.calendar-weekdays{text-align:center;margin:16px 0 8px;font-size:12px;color:#61786a}.calendar .day{min-width:0;min-height:90px;padding:10px 5px;border-radius:10px;text-align:left;white-space:normal;border:1px solid #d5dfd8;color:#263f32;display:flex;flex-direction:column;gap:6px}.calendar .day strong{font-size:20px}.calendar .day span{font-size:11px;line-height:1.5}.calendar .day:focus-visible{outline:3px solid #183d31;outline-offset:2px}.calendar .present,.calendar-legend .present{background:#c9eed5;color:#15532c}.calendar .absent,.calendar .unpaid_leave,.calendar-legend .absent{background:#ffd5d5;color:#8d2222}.calendar .paid_leave,.calendar-legend .paid_leave{background:#ffe89b;color:#695000}.calendar .weekly_off,.calendar .holiday,.calendar-legend .weekly_off{background:#e0dcf6;color:#4c3f78}.calendar .half,.calendar-legend .half{background:#ffdfbd;color:#794619}.calendar .unmarked,.calendar .future,.calendar .before_join,.calendar-legend .unmarked{background:#eef0ee;color:#64716a}.calendar .before_join{opacity:.65}.calendar-legend{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}.calendar-legend span{font-size:11px;padding:7px 9px;border-radius:8px}@media(max-width:600px){.calendar{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.calendar .day{min-height:75px;padding:7px 3px;border-radius:6px}.calendar .day strong{font-size:16px}.calendar .day span{font-size:9px}.calendar-weekdays{gap:3px;font-size:10px}}

/* Individual monthly salary sheet. Scoped to avoid changing other screens. */
.salary-dialog{max-width:870px;width:96%}.salary-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:18px}.salary-toolbar p{flex:1;font-size:13px;line-height:1.6}.salary-sheet{background:#fff;color:#111;padding:8mm;font-family:"Nirmala UI","Vrinda",system-ui,sans-serif;font-size:11px;line-height:1.4;overflow-wrap:anywhere}.salary-sheet p{margin:3px 0}.salary-heading{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #222;padding-bottom:10px}.salary-heading h1{font-size:24px;margin:0 0 3px}.salary-kicker{font-size:10px;letter-spacing:.3px}.salary-month{text-align:right;font-size:15px}.salary-month p{font-size:11px}.salary-identity{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid #bbb}.salary-identity b{font-size:14px}.salary-sheet h2{font-size:12px;margin:10px 0 5px;font-weight:700}.salary-sheet h2 small{font-size:10px;color:#333}.salary-totals{display:grid;grid-template-columns:1fr 1fr;column-gap:25px}.salary-totals>div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #ddd;padding:4px 0;break-inside:avoid}.salary-totals>div:nth-child(n+7){font-weight:700}.salary-small{font-size:9px;line-height:1.65;margin-top:7px!important}.salary-attendance{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.salary-sheet table{width:100%;border-collapse:collapse;white-space:normal;table-layout:fixed;font-size:10px}.salary-sheet th,.salary-sheet td{border:1px solid #bbb;padding:3px 5px;color:#111;vertical-align:top}.salary-sheet th{background:#eee;font-weight:700}.salary-attendance th:first-child{width:38%}.salary-attendance tr{height:23px}.salary-money{text-align:right!important;white-space:nowrap}.salary-advances th:nth-child(1){width:20%}.salary-advances th:nth-child(2){width:17%}.salary-advances th:nth-child(4){width:19%}.salary-notes{font-size:9px;line-height:1.5;margin-top:7px;white-space:pre-wrap}.salary-warning{font-size:10px;line-height:1.5;border:1px solid #777;padding:6px;margin-top:8px}.salary-signatures{display:flex;justify-content:space-between;gap:20px;margin-top:25px;padding-top:5px;break-inside:avoid}.salary-signatures span{border-top:1px solid #444;padding-top:5px;text-align:center;flex:1;font-size:10px}.salary-foot{border-top:1px solid #bbb;padding-top:7px;margin-top:10px!important;font-size:8px}#payslip-print-root{display:none}
@media(max-width:600px){.salary-sheet{padding:2mm;font-size:10px}.salary-attendance{gap:6px}.salary-sheet th,.salary-sheet td{padding:3px}.salary-toolbar{flex-wrap:wrap}.salary-heading h1{font-size:20px}}
@page{size:A4 portrait;margin:10mm}
@media print{body.printing-payslip{background:#fff!important;margin:0!important}body.printing-payslip>*:not(#payslip-print-root){display:none!important}body.printing-payslip>#payslip-print-root{display:block!important}#payslip-print-root .salary-sheet{padding:0;font-size:10px;line-height:1.35}#payslip-print-root .salary-sheet table{font-size:9px}#payslip-print-root .salary-attendance tr{height:21px}#payslip-print-root .salary-sheet th,#payslip-print-root .salary-sheet td{padding:2px 5px}#payslip-print-root .salary-totals>div{padding:3px 0}#payslip-print-root .salary-sheet h2{margin:8px 0 4px}#payslip-print-root .salary-sheet tr{break-inside:avoid}#payslip-print-root .salary-sheet thead{display:table-header-group}#payslip-print-root .salary-heading,#payslip-print-root .salary-identity{break-inside:avoid}#payslip-print-root .salary-foot{color:#333}.calendar .day{display:flex!important}}