:root{--ink:#17243b;--muted:#78859a;--line:#e8edf3;--paper:#fff;--bg:#f6f8fb;--blue:#365ce5;--blue-dark:#2646c7;--mint:#e5f6ef;--green:#16875d;--lav:#f0edff;--purple:#7157d8;--amber:#fff4df;--radius:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',sans-serif}.sidebar{position:fixed;inset:0 auto 0 0;width:246px;background:#fff;border-right:1px solid var(--line);padding:24px 16px 14px;display:flex;flex-direction:column;z-index:2}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--ink);font:800 20px Manrope,sans-serif;letter-spacing:-.8px;margin:2px 9px 33px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;color:white;background:linear-gradient(140deg,#5c7df4,#365ce5);border-radius:12px;font:800 24px Manrope;box-shadow:0 7px 16px #365ce533}.brand-light{color:var(--blue);font-weight:600}.brand small{display:block;font:700 8px 'DM Sans';letter-spacing:1.4px;color:#98a4b7;margin-top:1px}.side-label{padding:0 12px;color:#9aa5b6;font-size:10px;font-weight:700;letter-spacing:1.3px;margin-bottom:9px}.nav-section{margin:25px 0 9px}.nav-item{width:100%;height:41px;background:transparent;border:0;text-align:left;padding:0 12px;border-radius:10px;color:#69768b;font:500 13px 'DM Sans';cursor:pointer;display:flex;align-items:center;gap:12px}.nav-item span{font-size:17px;width:18px;text-align:center;color:#8794a7}.nav-item:hover{background:#f7f8fc;color:var(--ink)}.nav-item.active{color:var(--blue);background:#eef2ff;font-weight:700}.nav-item.active span{color:var(--blue)}.sidebar-bottom{margin-top:auto;display:flex;align-items:center;gap:10px;padding:14px 10px;background:#f8f9fc;border:1px solid var(--line);border-radius:12px}.help-icon{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:#e9eeff;font-weight:700}.sidebar-bottom b,.profile b{font-size:11px;display:block}.sidebar-bottom small,.profile small{font-size:10px;color:var(--muted);display:block;margin-top:4px}.arrow{margin-left:auto;color:#8592a5}.profile{display:flex;align-items:center;gap:10px;padding:18px 8px 2px}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e9edff;color:#4562d6;font-size:11px;font-weight:700}.avatar.small{width:34px;height:34px}.dots{margin-left:auto;color:#9ba6b5}.main{margin-left:246px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px}.crumb{display:flex;gap:10px;align-items:center;color:#99a4b4;font-size:12px}.crumb b{color:#c4ccd6;font-weight:400}.crumb strong{color:#344158;font-weight:600}.top-actions{display:flex;align-items:center;gap:17px}.icon-btn{position:relative;width:32px;height:32px;background:#fff;border:1px solid var(--line);color:#68768b;border-radius:10px;font-size:15px;cursor:pointer}.bell{font-size:16px}.bell i{position:absolute;right:6px;top:5px;width:6px;height:6px;background:#ef7777;border:1px solid #fff;border-radius:50%}.content{width:min(1150px,100%);margin:0 auto;padding:34px 38px 60px;flex:1}footer{padding:17px 38px;color:#9aa5b3;font-size:10px;border-top:1px solid var(--line);background:#fff}footer span{padding:0 5px}.welcome{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:25px}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;font-weight:700;color:var(--blue);margin-bottom:9px}h1,h2,h3,p{margin-top:0}h1{font:700 26px Manrope,sans-serif;letter-spacing:-.7px;margin-bottom:6px}h2{font:700 16px Manrope,sans-serif;margin-bottom:5px}h3{font:700 13px Manrope,sans-serif;margin-bottom:4px}.subtext{color:var(--muted);font-size:12px}.date-chip{padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:white;color:#607087;font-size:11px}.grid{display:grid;gap:16px}.stats{grid-template-columns:repeat(4,1fr);margin-bottom:17px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:19px;box-shadow:0 3px 12px #1d35570a}.stat{display:flex;align-items:center;gap:13px}.stat-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;font-size:18px;color:var(--blue);background:#edf1ff}.stat:nth-child(2) .stat-icon{color:var(--green);background:var(--mint)}.stat:nth-child(3) .stat-icon{color:var(--purple);background:var(--lav)}.stat:nth-child(4) .stat-icon{color:#c88727;background:var(--amber)}.stat-label{font-size:10px;color:var(--muted);margin-bottom:5px}.stat-value{font:700 20px Manrope}.stat-meta{font-size:9px;color:#96a1b1;margin-top:3px}.dashboard-columns{grid-template-columns:1.5fr 1fr}.card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:17px}.text-link{color:var(--blue);font-size:11px;font-weight:600;background:none;border:0;cursor:pointer}.attendance-card{min-height:296px}.calendar-head{display:flex;align-items:center;justify-content:space-between;margin:12px 0 16px}.calendar-head button{border:0;background:none;color:#8290a4;cursor:pointer}.calendar-month{font-weight:700;font-size:12px}.week,.days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.week{color:#a1acba;font-size:10px;padding-bottom:8px;border-bottom:1px solid #f0f2f6}.days button{height:32px;border:0;background:transparent;color:#47566d;font:11px 'DM Sans';border-radius:9px;cursor:pointer}.days button.muted{color:#c7ced8}.days button.today{color:white;background:var(--blue);font-weight:700}.days button.marked:after{content:'';display:block;width:4px;height:4px;border-radius:5px;background:#43b788;margin:1px auto 0}.legend{display:flex;gap:16px;color:#8491a2;font-size:9px;margin-top:14px}.legend i{width:6px;height:6px;display:inline-block;border-radius:50%;background:#34b27d;margin-right:5px}.legend .leave-dot{background:#9b82ef}.quick-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.action{border:1px solid var(--line);background:white;border-radius:11px;padding:12px;text-align:left;cursor:pointer;color:var(--ink);transition:.15s}.action:hover{border-color:#bdc9f8;background:#fafbff}.action .action-icon{color:var(--blue);font-size:17px;margin-bottom:8px}.action b{display:block;font-size:11px}.action small{font-size:9px;color:#929eae;display:block;margin-top:4px}.section-row{display:flex;justify-content:space-between;align-items:center;margin:23px 0 12px}.module-grid{grid-template-columns:repeat(4,1fr)}.module-card{padding:15px;min-height:118px;cursor:pointer;transition:.16s}.module-card:hover{transform:translateY(-2px);border-color:#cbd4f8}.module-card .module-ico{font-size:17px;color:var(--blue);margin-bottom:12px}.module-card p{font-size:10px;color:var(--muted);margin:5px 0 0}.page-banner{padding:22px 23px;background:linear-gradient(115deg,#edf2ff,#f7f8ff 66%,#effaf5);border:1px solid #e4eafd;border-radius:17px;margin-bottom:19px;display:flex;justify-content:space-between;align-items:center}.page-banner h1{font-size:23px}.primary,.secondary{border:0;border-radius:9px;padding:10px 15px;font:600 11px 'DM Sans';cursor:pointer}.primary{background:var(--blue);color:#fff;box-shadow:0 5px 12px #365ce52b}.primary:hover{background:var(--blue-dark)}.secondary{background:#f2f4f8;color:#59677d}.form-card{max-width:850px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}.field{display:flex;flex-direction:column;gap:7px}.field.wide{grid-column:1/-1}.field label{font-size:10px;font-weight:700;color:#58677d}.field label em{font-style:normal;color:#e06d6d}.field input,.field select,.field textarea{width:100%;border:1px solid #e3e8ef;border-radius:9px;padding:10px 11px;background:#fff;color:#5d6a7e;font:11px 'DM Sans';outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#9daef6;box-shadow:0 0 0 3px #365ce512}.field textarea{height:76px;resize:vertical}.hint{font-size:9px;color:#9aa5b4}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;white-space:nowrap}.table th{text-align:left;background:#f8f9fb;color:#8290a2;font-size:9px;font-weight:700;padding:11px 12px}.table td{border-bottom:1px solid #f0f2f5;padding:12px;color:#506077;font-size:10px}.pill{display:inline-block;padding:5px 8px;border-radius:20px;background:#e9f7f0;color:#21835d;font-size:9px}.notice{padding:12px 14px;background:#f2f5ff;border-radius:10px;color:#5d6c8d;font-size:10px;line-height:1.6;margin-bottom:16px}.toast{position:fixed;bottom:22px;right:24px;background:#17243b;color:white;padding:12px 17px;border-radius:10px;box-shadow:0 8px 25px #17243b35;font-size:11px;z-index:9;animation:fade .22s}@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media(max-width:1000px){.sidebar{width:210px}.main{margin-left:210px}.content{padding:27px 24px}.stats{grid-template-columns:repeat(2,1fr)}.module-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.sidebar{width:62px;padding:18px 7px}.brand{margin:3px auto 30px}.brand>span:last-child,.side-label,.nav-item:not(.active),.nav-item.active{font-size:0}.nav-item{justify-content:center;padding:0}.nav-item span{font-size:18px}.sidebar-bottom,.profile{display:none}.main{margin-left:62px}.topbar{padding:0 15px;height:58px}.content{padding:24px 14px}.welcome{align-items:flex-start;gap:12px;flex-direction:column}.dashboard-columns{grid-template-columns:1fr}.module-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.field.wide{grid-column:auto}.page-banner{align-items:flex-start;gap:10px;flex-direction:column}footer{padding:14px}.stats{gap:9px}.stat{padding:12px}.stat-icon{width:32px;height:32px}.stat-value{font-size:17px}}
#nav{overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#d8dfeb transparent}#nav .nav-section:first-child{margin-top:0}.nav-item{flex:none}

.brand-logo{width:42px;height:42px;object-fit:contain;border-radius:9px;border:1px solid #e8edf3;background:#fff;padding:2px;flex:none}

.mobile-nav-toggle{display:none}
@media(max-width:700px){.sidebar{width:270px;padding:20px 15px 14px;transform:translateX(-100%);transition:transform .22s ease;box-shadow:8px 0 28px #17243b1a}.sidebar.mobile-open{transform:translateX(0)}body.sidebar-open:before{content:'';position:fixed;inset:0;background:#17243b55;z-index:5}.main{margin-left:0}.mobile-nav-toggle{display:block;flex:none}.topbar{gap:10px}.crumb{margin-right:auto;min-width:0}.crumb span,.crumb b{display:none}.top-actions{gap:7px}.nav-item{font-size:13px!important;justify-content:flex-start;padding:0 12px}.nav-item span{font-size:17px}.side-label{font-size:10px!important}.sidebar-bottom,.profile{display:flex}}
@media(max-width:420px){.topbar{padding:0 10px}.top-actions{gap:5px}.icon-btn{width:30px;height:30px}.avatar.small{width:30px;height:30px}.content{padding:20px 11px 42px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{gap:8px;padding:10px}.stat-label{font-size:9px}.stat-value{font-size:16px}.stat-meta{font-size:8px}.card{padding:14px}.legend{gap:8px;font-size:8px}.module-card{min-height:104px;padding:12px}.page-banner{padding:17px}.page-banner h1{font-size:20px}h1{font-size:23px}}

body.auth-pending .sidebar,body.auth-pending .main{visibility:hidden}body.auth-pending{overflow:hidden}.auth-gate{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:linear-gradient(140deg,#f5f7ff,#edf7f3)}.auth-gate[hidden]{display:none}.auth-card{width:min(420px,100%);padding:30px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px #17243b18}.auth-card h1{font-size:24px}.auth-card .field{margin-top:16px}.auth-card .primary{width:100%;margin-top:20px}.auth-error{min-height:18px;margin-top:12px;color:#b54242;font-size:12px}.auth-help{margin-top:18px;color:var(--muted);font-size:12px;line-height:1.6}.auth-brand{font:800 20px Manrope,sans-serif;color:var(--ink);margin-bottom:26px}.auth-brand span{color:var(--blue)}.auth-card input{width:100%;border:1px solid #e3e8ef;border-radius:9px;padding:12px;background:#fff;color:var(--ink);font:14px 'DM Sans'}.auth-card label{font-size:12px;font-weight:700;color:#58677d}
/* Improve readability to match the larger text scale in the reference portal. */
body{font-size:15px}
.brand{font-size:21px}.brand small{font-size:9px}
.side-label{font-size:11px}.nav-item{font-size:14px}
.sidebar-bottom b,.profile b{font-size:12px}.sidebar-bottom small,.profile small{font-size:11px}
.crumb{font-size:13px}.content{max-width:1240px}
.eyebrow{font-size:11px}.subtext{font-size:13px}.date-chip{font-size:12px}
h1{font-size:29px}h2{font-size:18px}h3{font-size:15px}
.stat-label{font-size:12px}.stat-meta{font-size:11px}.stat-value{font-size:22px}
.text-link{font-size:13px}.calendar-month{font-size:14px}.week{font-size:12px}.days button{font-size:13px}
.action b{font-size:13px}.action small{font-size:11px}.action .action-icon{font-size:19px}
.module-card h3{font-size:14px}.module-card p{font-size:12px}.notice{font-size:12px}
.field label{font-size:12px}.field input,.field select,.field textarea{font-size:13px}.hint{font-size:11px}
.table th{font-size:11px}.table td{font-size:12px}.pill{font-size:11px}
footer{font-size:11px}
@media(max-width:420px){.stat-label{font-size:10px}.stat-meta{font-size:9px}.legend{font-size:9px}.module-card p{font-size:10px}}
/* Local request and attendance workflows */
[hidden]{display:none!important}.workflow-request-card{max-width:920px}.workflow-approver{margin-top:20px;padding:15px 16px;border:1px solid var(--line);border-radius:12px;background:#fbfcff}.workflow-approver h3{margin-bottom:6px}.workflow-approver p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}.timeoffice-tabs{display:flex;align-items:center;gap:9px;margin-bottom:18px}.timeoffice-tabs .active,.timeoffice-filterbar .active{background:#eaf0ff;color:var(--blue);border:1px solid #d7e0ff}.timeoffice-tabs .subtext{margin-left:auto}.timeoffice-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.timeoffice-toolbar .field{min-width:160px;flex:1}.timeoffice-toolbar .primary{min-height:39px}.timeoffice-filterbar{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.timeoffice-summary{font-size:13px;color:var(--muted);margin:10px 0 14px}.timeoffice-records{display:grid;gap:12px}.day-card{border:1px solid var(--line);border-radius:13px;padding:16px;background:#fff}.day-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.day-card-head>div{display:flex;align-items:center;gap:10px}.day-card-head strong{font-size:15px}.day-card-grid{display:grid;grid-template-columns:repeat(5,minmax(90px,1fr));gap:12px}.day-card-grid>div{display:flex;flex-direction:column;gap:5px}.day-card-grid span{font-size:10px;letter-spacing:.45px;color:var(--muted)}.day-card-grid strong{font-size:13px;font-weight:600;overflow-wrap:anywhere}.empty-state,.empty-cell{padding:22px;text-align:center;color:var(--muted);font-size:13px}.status-pill{display:inline-flex;align-items:center;width:max-content;border-radius:99px;background:#edf1f6;color:#536278;padding:5px 9px;font-size:11px;font-weight:700}.status-pill.pending{background:#fff4df;color:#9b6915}.status-pill.approved,.status-pill.present{background:#e7f6ef;color:#16875d}.status-pill.rejected,.status-pill.absent{background:#fff0f2;color:#c03a57}.status-pill.weekly-off,.status-pill.holiday{background:#f0edff;color:#7157d8}.workflow-summary{grid-template-columns:repeat(4,minmax(0,1fr));margin:16px 0}.workflow-summary .card{padding:14px}.workflow-summary h3{margin-bottom:5px}.request-details{display:grid;gap:6px;min-width:170px}.request-detail{display:flex;gap:8px;align-items:flex-start;white-space:normal}.request-detail b{color:#52617a;font-size:11px;min-width:94px}.request-detail span{font-size:11px;color:var(--ink);overflow-wrap:anywhere}.table-secondary{display:block;color:var(--muted);font-size:11px;margin-top:4px}.decision-actions{display:flex;gap:6px}.decision-actions button{padding:8px 10px}.workflow-backdrop{position:fixed;inset:0;background:#101b2d80;z-index:10;display:grid;place-items:center;padding:20px;overflow:auto}.workflow-modal{width:min(760px,100%);max-height:min(90vh,850px);overflow:auto}.workflow-modal .form-grid{margin-top:14px}.check-field{display:flex;align-items:center;gap:8px;font-size:13px;color:#58677d}.check-field input{width:16px;height:16px}.toast-error{background:#9b2b3e}.regularization-days button.has-attendance:after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:6px;height:6px;background:#2ca56d;border-radius:50%}.regularization-days button.date-absent:after{background:#ed3658}.regularization-days button.selected:after{background:#fff}.workflow-filters{margin-bottom:6px}.workflow-filters .field{min-width:150px}.workflow-summary .card{box-shadow:none;border-color:#eef1f5}
@media(max-width:850px){.day-card-grid{grid-template-columns:repeat(3,minmax(80px,1fr))}.workflow-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.timeoffice-toolbar{align-items:stretch;flex-direction:column}.timeoffice-toolbar .field{min-width:0}.timeoffice-tabs{flex-wrap:wrap}.timeoffice-tabs .subtext{width:100%;margin-left:0}.day-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workflow-modal{padding:15px}.workflow-backdrop{padding:10px}.decision-actions{flex-direction:column}.workflow-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.attendance-card{padding:22px 24px 20px}.attendance-card .card-head{margin-bottom:20px}.calendar-head{margin:14px 0 18px}.calendar-head button{width:34px;height:34px;border-radius:9px;font-size:24px}.calendar-head button:hover{background:#f1f4ff;color:var(--blue)}.calendar-month{font-weight:700;color:#263653}.week{padding-bottom:11px;border-bottom:1px solid var(--line);font-size:12px}.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:48px;align-items:center;padding-top:5px}.days button{width:40px;height:40px;justify-self:center;border-radius:50%;font-size:14px;position:relative;color:#34445d}.days button:hover{background:#f0f3ff}.days button.today{color:#fff;background:#13a9ec;font-weight:700;box-shadow:0 3px 9px #13a9ec35}.days button.marked:after{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:5px;height:5px;background:#31ad69;margin:0}.day-empty{display:block;width:40px;height:40px}.legend{gap:20px;margin-top:17px;font-size:11px;color:#65738a}.legend i{width:8px;height:8px;background:#31ad69}.legend .absent-dot{background:#f12d5a}.legend .leave-dot{background:#b79cf7}
@media(max-width:700px){.attendance-card{padding:17px 13px}.days{grid-auto-rows:42px}.days button{width:35px;height:35px}.day-empty{width:35px;height:35px}.legend{gap:10px;font-size:9px}}

.legend .today-dot{background:var(--blue)}

/* Larger readable type across all workspace pages. */
.crumb,.side-label{font-size:14px}.nav-item{font-size:16px}.brand small{font-size:10px}
.sidebar-bottom b,.profile b{font-size:14px}.sidebar-bottom small,.profile small{font-size:12px}
.field label{font-size:14px}.field input,.field select,.field textarea{font-size:15px;min-height:44px}.field textarea{min-height:110px}
.hint,.auth-help,.auth-error{font-size:13px}.notice{font-size:14px}.table th,.table td{font-size:13px}
.regularization-layout{display:grid;grid-template-columns:minmax(340px,.75fr) minmax(0,1.5fr);gap:16px;align-items:start}
.regularization-calendar,.regularization-detail{padding:20px}.regularization-days{grid-auto-rows:44px}.regularization-days button{width:36px;height:36px;font-size:14px;position:relative}
.regularization-days button.selected{background:#41ba30;color:#fff;font-weight:700}.regularization-days button.today:not(.selected){background:#12a9ed;color:#fff}
.regularization-days button.selected:after{display:none}.regularization-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;padding:8px 0 16px}
.regularization-fields div{display:flex;flex-direction:column;gap:6px}.regularization-fields span{font-size:13px;color:var(--muted)}.regularization-fields strong{font-size:15px;font-weight:600;color:var(--ink)}
.regularization-action{max-width:440px}.regularization-approver{border-top:1px solid var(--line);margin-top:16px;padding-top:13px}.regularization-approver>button{width:100%;border:0;background:transparent;text-align:left;padding:4px 0;color:var(--ink);font:700 16px 'DM Sans';display:flex;justify-content:space-between;cursor:pointer}.regularization-approver .subtext{padding:12px 0}.regularization-note{font-size:13px;color:var(--muted);margin:15px 0 0}
.regularization-calendar .form-actions{margin-top:18px}
@media(max-width:850px){.regularization-layout{grid-template-columns:1fr}.regularization-days{grid-auto-rows:42px}}
@media(max-width:700px){.regularization-fields{gap:14px}.field label{font-size:14px}.field input,.field select,.field textarea{font-size:16px}.regularization-layout{gap:12px}}
/* Make attendance status marks easy to see on calendar dates. */
.days button.marked::after {
  width: 9px;
  height: 9px;
  bottom: 1px;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px #147a4c;
  background: #16875d;
}

.days button.absent::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1px;
  transform: translateX(-50%);
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin: 0;
  background: #d71945;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px #a80d31;
}

.regularization-days button.has-attendance::after {
  width: 9px;
  height: 9px;
  bottom: 1px;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px #147a4c;
  background: #16875d;
}

.regularization-days button.date-absent::after {
  background: #d71945;
  box-shadow: 0 0 0 1px #a80d31;
}

.regularization-days button.selected::after {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 1px #185719;
}

/* Attendance dashboard arranged as calendar, actions, and live summary columns. */
#page-content:has(.attendance-card) {
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(270px, 1fr) minmax(280px, 1fr);
  grid-auto-flow: row;
  align-items: start;
  gap: 16px;
}

#page-content:has(.attendance-card) > .welcome,
#page-content:has(.attendance-card) > .notice {
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: 0;
}

#page-content:has(.attendance-card) > .stats {
  grid-column: 3;
  grid-row: 3 / span 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  margin-bottom: 0;
  gap: 10px;
}

#page-content:has(.attendance-card) > .dashboard-columns {
  display: contents;
}

#page-content:has(.attendance-card) .attendance-card {
  grid-column: 1;
  grid-row: 3 / span 3;
  width: 100%;
}

#page-content:has(.attendance-card) .dashboard-columns > .card:not(.attendance-card) {
  grid-column: 2;
  grid-row: 3;
  width: 100%;
}

#page-content:has(.attendance-card) > .section-row:nth-child(5) {
  grid-column: 2;
  grid-row: 4;
  margin: 2px 0 0;
}

#page-content:has(.attendance-card) > .module-grid:nth-child(6) {
  grid-column: 2;
  grid-row: 5;
}

#page-content:has(.attendance-card) > .section-row:nth-child(7) {
  grid-column: 1 / -1;
}

#page-content:has(.attendance-card) > .module-grid:nth-child(8) {
  grid-column: 1 / -1;
}

#page-content:has(.attendance-card) .stats .card {
  min-height: 105px;
  padding: 14px;
}

@media (max-width: 1050px) {
  #page-content:has(.attendance-card) {
    grid-template-columns: minmax(270px, 1fr) minmax(250px, 1fr);
  }
  #page-content:has(.attendance-card) > .stats {
    grid-column: 2;
    grid-row: 4;
  }
  #page-content:has(.attendance-card) .attendance-card {
    grid-row: 3 / span 3;
  }
}

@media (max-width: 700px) {
  #page-content:has(.attendance-card) {
    display: block;
  }
  #page-content:has(.attendance-card) > .welcome,
  #page-content:has(.attendance-card) > .notice,
  #page-content:has(.attendance-card) > .stats,
  #page-content:has(.attendance-card) .attendance-card,
  #page-content:has(.attendance-card) .dashboard-columns > .card:not(.attendance-card),
  #page-content:has(.attendance-card) > .section-row,
  #page-content:has(.attendance-card) > .module-grid {
    margin-bottom: 14px;
  }
  #page-content:has(.attendance-card) > .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #page-content:has(.attendance-card) > .dashboard-columns {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.salary-page { max-width: 1120px; margin: 0 auto; }
.salary-banner { align-items: center; }
.salary-actions { display: flex; gap: 9px; }
.salary-slip-card { padding: 28px; border-radius: 12px; }
.salary-company { display: grid; grid-template-columns: 46px 1fr; gap: 13px; align-items: center; padding-bottom: 20px; border-bottom: 2px solid #243a69; }
.salary-company-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid #e45e54; border-radius: 12px; color: #e45e54; font: 800 23px Manrope,sans-serif; }
.salary-company h2 { margin: 0; color: #1c2c4d; font-size: 21px; }
.salary-company p { margin: 4px 0 0; color: #7b8799; font-size: 12px; }
.salary-period { justify-self: stretch; }
.salary-template-note { margin: 14px 0 18px; padding: 9px 12px; border-radius: 7px; background: #f2f5ff; color: #53678d; font-size: 11px; }
.salary-section { min-width: 0; }
.salary-section h3 { padding-bottom: 9px; border-bottom: 1px solid var(--line); color: #263653; font-size: 14px; }
.salary-employee-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px 14px; }
.salary-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.salary-field > span { color: #708098; font-size: 10px; }
.salary-field input { width: 100%; min-width: 0; height: 34px; padding: 6px 8px; border: 1px solid #dfe5ee; border-radius: 6px; background: #fff; color: var(--ink); font: 12px 'DM Sans',sans-serif; }
.salary-tables { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 21px; }
.salary-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.salary-table th,.salary-table td { padding: 8px 7px; border-bottom: 1px solid #edf0f5; text-align: left; }
.salary-table thead th { background: #f5f7fb; color: #61718a; font-weight: 600; }
.salary-table th:last-child,.salary-table td:last-child { width: 42%; text-align: right; }
.salary-table input { width: 100%; max-width: 140px; padding: 6px 7px; border: 1px solid #e0e6ef; border-radius: 5px; text-align: right; font: inherit; }
.salary-table tfoot th { border-top: 1px solid #d7deea; border-bottom: 0; color: #253653; font-size: 12px; }
.salary-net { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding: 16px 18px; border-radius: 8px; background: #edf2ff; color: #253a7c; }
.salary-net span { font-size: 13px; font-weight: 700; }
.salary-net strong { font: 700 22px Manrope,sans-serif; }
.salary-words { padding: 10px 2px; color: #66758c; font-size: 11px; }
.salary-footer { display: flex; justify-content: space-between; align-items: end; margin-top: 34px; color: #67758b; font-size: 11px; }
.salary-footer > div:last-child { width: 180px; padding-top: 30px; border-top: 1px solid #9ba6b7; text-align: center; }
.salary-footer > div.salary-signature-note { width: auto; padding-top: 0; border-top: 0; text-align: left; }
.salary-footer .salary-field input { width: 175px; }
.salary-screen-note { margin-top: 12px; color: #78859a; font-size: 11px; }

@media (max-width: 760px) {
  .salary-slip-card { padding: 18px 14px; }
  .salary-company { grid-template-columns: 40px 1fr; }
  .salary-period { grid-column: 1 / -1; }
  .salary-employee-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .salary-tables { grid-template-columns: 1fr; gap: 12px; }
  .salary-actions { flex-wrap: wrap; }
}

@media print {
  body:has(.salary-slip-card) { background: white; }
  body:has(.salary-slip-card) .sidebar,
  body:has(.salary-slip-card) .topbar,
  body:has(.salary-slip-card) footer,
  body:has(.salary-slip-card) .salary-banner,
  body:has(.salary-slip-card) .salary-actions,
  body:has(.salary-slip-card) .salary-template-note,
  body:has(.salary-slip-card) .salary-period,
  body:has(.salary-slip-card) .salary-screen-note { display: none !important; }
  body:has(.salary-slip-card) .main { margin: 0; }
  body:has(.salary-slip-card) .content { width: 100%; max-width: none; padding: 0; background: white; }
  body:has(.salary-slip-card) .salary-page { max-width: none; }
  body:has(.salary-slip-card) .salary-slip-card { border: 0; box-shadow: none; padding: 4mm; }
  body:has(.salary-slip-card) .salary-field input,
  body:has(.salary-slip-card) .salary-table input { border: 0; border-radius: 0; padding-left: 0; padding-right: 0; }
  body:has(.salary-slip-card) .salary-template-note { background: white; border: 1px solid #d7deea; }
  @page { size: A4 portrait; margin: 6mm; }
}

/* Payslip page closely follows the supplied single-page wage-slip print layout. */
.salary-page { max-width: 900px; }
.salary-month-control { width: min(100%,820px); margin: 0 auto 10px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; color: #253653; font-size: 13px; }
.salary-month-control label { font-weight: 600; }
.salary-month-control input { min-height: 38px; padding: 7px 10px; border: 1px solid #d7deea; border-radius: 7px; background: #fff; color: #17243d; font: inherit; }
.salary-slip-card { width: min(100%,820px); margin: 0 auto; padding: 0; border: 1px solid #252525; border-radius: 0; box-shadow: none; color: #111; background: #fff; font-family: Arial, sans-serif; }
.salary-company { min-height: 94px; grid-template-columns: 94px minmax(0,1fr) 80px; gap: 8px; padding: 10px; border-bottom: 2px solid #222; background: #e7efdc; }
.salary-company-mark { width: 68px; height: 68px; border: 2px solid #333; border-radius: 50%; color: #333; font: 800 34px Georgia,serif; background: #fff; }
.salary-company-logo { display: block; width: 80px; height: 68px; object-fit: contain; }
.salary-iso-logo { display: block; width: 76px; height: 90px; object-fit: fill; justify-self: end; border: 1px solid #111; }
.salary-company-title { text-align: center; }
.salary-company h2 { margin: 0; color: #111; font: 700 22px Georgia,serif; }
.salary-company h3 { margin: 2px 0 0; color: #111; font: 700 15px Arial,sans-serif; }
.salary-rules { color: #111; font-size: 12px; }
.salary-company p { margin: 6px 0 2px; color: #111; font-size: 15px; }
.salary-address { width: 100%; max-width: 100%; margin: 4px auto 0; color: #111; font-size: 12px; line-height: 1.3; }
.salary-address .salary-field { flex-direction: row; align-items: center; justify-content: center; gap: 5px; }
.salary-address .salary-field > span { font-size: 11px; }
.salary-address .salary-field input { height: 22px; padding: 1px 3px; border: 0; border-bottom: 1px solid #999; background: transparent; font-size: 11px; }
.salary-email .salary-field { flex-direction: row; align-items: center; justify-content: center; gap: 5px; }
.salary-email .salary-field > span { font-size: 11px; }
.salary-email .salary-field input { height: 22px; padding: 1px 3px; border: 0; border-bottom: 1px solid #999; background: transparent; font-size: 11px; }
.salary-period .salary-field > span { color: #222; font-size: 10px; }
.salary-template-note { margin: 8px 10px; padding: 5px 8px; border: 1px solid #d2dacb; border-radius: 0; background: #f6f8f3; color: #4d5847; font-size: 9px; }
.salary-section { padding: 0 10px; }
.salary-section h3 { margin: 8px -10px 0; padding: 5px 7px; border-top: 1px solid #222; border-bottom: 1px solid #222; background: #e7efdc; color: #111; font: 700 11px Arial,sans-serif; }
.salary-employee-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; padding: 5px 0 7px; }
.salary-employee-column { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; }
.salary-field { flex-direction: row; align-items: center; gap: 4px; min-height: 27px; }
.salary-field > span { flex: 0 0 42%; color: #222; font-size: 11px; }
.salary-employee-grid .salary-field > span::after { content: ':'; float: right; margin-right: 8px; }
.salary-field input { height: 24px; padding: 2px 4px; border: 0; border-bottom: 1px dotted #777; border-radius: 0; color: #111; font: 11px Arial,sans-serif; }
.salary-summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 2px 8px 6px; }
.salary-summary-box { min-width: 0; padding: 4px 6px; border: 1px solid #222; }
.salary-summary-box h3 { margin: 0 0 2px; padding: 0 0 2px; border-bottom: 1px solid #aaa; color: #111; font: 700 10px Arial,sans-serif; }
.salary-summary-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; gap: 2px; }
.salary-summary-fields .salary-field { display: grid; grid-template-rows: 16px 21px; align-items: center; min-width: 0; margin: 0; text-align: center; }
.salary-summary-fields .salary-field > span { display: block; min-height: 0; text-align: center; white-space: nowrap; font-size: 9px; line-height: 16px; }
.salary-summary-fields .salary-field input { display: block; box-sizing: border-box; justify-self: center; width: min(58px,100%); height: 19px; margin: 0; padding: 1px 3px; border: 1px solid #777; border-radius: 2px; background: #fff; text-align: center; font-variant-numeric: tabular-nums; font-size: 10px; }
@media (max-width: 760px) { .salary-summary-grid { gap: 5px; } .salary-summary-box { padding: 4px 3px; } .salary-summary-fields .salary-field > span { white-space: normal; font-size: 8px; line-height: 10px; } .salary-summary-fields .salary-field input { width: min(48px,100%); } }
.salary-tables { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; margin-top: 0; }
.salary-tables .salary-section { padding: 0; }
.salary-tables .salary-section + .salary-section { border-left: 1px solid #222; }
.salary-tables .salary-section h3 { display: none; }
.salary-table { height: 100%; font-size: 11px; }
.salary-table th,.salary-table td { height: 25px; padding: 4px 6px; border-bottom: 0; }
.salary-table thead th { height: 28px; border-bottom: 1px solid #222; background: #e7efdc; color: #111; font-size: 11px; }
.salary-table th:last-child,.salary-table td:last-child { width: 36%; }
.salary-table input { max-width: 110px; height: 22px; padding: 1px 3px; border: 0; border-bottom: 1px dotted #999; border-radius: 0; background: transparent; font: 11px Arial,sans-serif; }
.salary-table tfoot th { height: 30px; border-top: 2px solid #222; border-bottom: 2px solid #222; background: #fafafa; font-size: 12px; }
.salary-net { margin: 0; padding: 6px 10px; border: 0; border-bottom: 1px solid #222; border-radius: 0; background: #fff; color: #111; }
.salary-net span { font-size: 12px; }
.salary-net strong { font-size: 18px; }
.salary-words { padding: 8px 10px; border-bottom: 1px solid #222; background: #e7efdc; color: #111; font-size: 11px; }
.salary-footer { margin: 0; padding: 10px; color: #333; font-size: 11px; }
.salary-footer > div:last-child { width: 145px; padding-top: 24px; border-color: #777; }
.salary-footer > div.salary-signature-note { width: auto; padding-top: 0; border: 0; text-align: left; }
.salary-footer .salary-field { display: grid; gap: 2px; }
.salary-footer .salary-field > span { font-size: 8px; }
.salary-footer .salary-field input { width: 140px; }
@media print {
  body:has(.salary-slip-card) .salary-page { width: 100%; }
  body:has(.salary-slip-card) .salary-slip-card { width: 100%; min-height: 0; padding: 0; border: 1px solid #222; }
  body:has(.salary-slip-card) .salary-company { min-height: 0; grid-template-columns: 68px minmax(0,1fr) 62px; gap: 5px; padding: 6px; background: #e7efdc !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body:has(.salary-slip-card) .salary-company-logo { width: 58px; height: 52px; }
  body:has(.salary-slip-card) .salary-iso-logo { width: 54px; height: 66px; }
  body:has(.salary-slip-card) .salary-company h2 { font-size: 19px; }
  body:has(.salary-slip-card) .salary-company h3 { font-size: 13px; }
  body:has(.salary-slip-card) .salary-rules { font-size: 10px; }
  body:has(.salary-slip-card) .salary-addresses { font-size: 8.5px; line-height: 1.15; }
  body:has(.salary-slip-card) .salary-company p { margin: 3px 0 1px; font-size: 13px; }
  body:has(.salary-slip-card) .salary-month-control { display: none !important; }
  body:has(.salary-slip-card) .salary-employee-grid { padding: 2px 0 4px; }
  body:has(.salary-slip-card) .salary-employee-grid .salary-field { min-height: 21px; }
  body:has(.salary-slip-card) .salary-employee-grid .salary-field input { height: 19px; font-size: 10px; }
  body:has(.salary-slip-card) .salary-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin: 1px 8px 5px; }
  body:has(.salary-slip-card) .salary-summary-box { padding: 3px 5px; }
  body:has(.salary-slip-card) .salary-summary-box h3 { margin-bottom: 1px; padding-bottom: 1px; }
  body:has(.salary-slip-card) .salary-summary-fields { gap: 2px; }
  body:has(.salary-slip-card) .salary-summary-fields .salary-field { grid-template-rows: 15px 19px; }
  body:has(.salary-slip-card) .salary-summary-fields .salary-field > span { font-size: 8.5px; line-height: 15px; }
  body:has(.salary-slip-card) .salary-summary-fields .salary-field input { width: min(58px,100%); height: 18px; border: 1px solid #777; border-radius: 2px; padding: 0 2px; font-size: 9px; }
  body:has(.salary-slip-card) .salary-tables { break-inside: avoid; page-break-inside: avoid; }
  body:has(.salary-slip-card) .salary-table th,
  body:has(.salary-slip-card) .salary-table td { height: 20px; padding: 2px 5px; }
  body:has(.salary-slip-card) .salary-table thead th { height: 23px; }
  body:has(.salary-slip-card) .salary-table tfoot th { height: 25px; }
  body:has(.salary-slip-card) .salary-net { padding: 4px 8px; break-inside: avoid; page-break-inside: avoid; }
  body:has(.salary-slip-card) .salary-net strong { font-size: 16px; }
  body:has(.salary-slip-card) .salary-words { padding: 5px 8px; font-size: 10px; break-inside: avoid; page-break-inside: avoid; }
  body:has(.salary-slip-card) .salary-footer { padding: 6px 8px; font-size: 9px; break-inside: avoid; page-break-inside: avoid; }
  body:has(.salary-slip-card) .salary-employee-grid .salary-field input { border-bottom: 1px dotted #777; }
  body:has(.salary-slip-card) .salary-address .salary-field input,
  body:has(.salary-slip-card) .salary-email .salary-field input { border-bottom: 1px solid #999; }
  body:has(.salary-slip-card) .salary-section h3,
  body:has(.salary-slip-card) .salary-table thead th,
  body:has(.salary-slip-card) .salary-words { background: #e7efdc !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ZingHR TNA inspired attendance overview, using BhavaniHR data and labels. */
#page-content:has(.tna-board) {
  display: block;
}

.tna-board {
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(320px, 1fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
}

.tna-calendar-card,
.tna-actions-card,
.tna-leave-card,
.tna-metrics-card,
.tna-holidays-card {
  border-radius: 10px;
  box-shadow: 0 2px 9px #17243b0a;
}

.tna-calendar-card { padding: 20px 20px 16px; }
.tna-calendar-card .calendar-head { margin: 0 0 14px; }
.tna-calendar-card .week { font-size: 11px; }
.tna-calendar-card .days { grid-auto-rows: 44px; }
.tna-calendar-card .days button { font-size: 14px; }
.tna-calendar-card .days > button:nth-child(7n + 1):not(.today) { background: #f3f5f1; color: #526249; }
.tna-calendar-card .days button.selected-day:not(.today) { background: #ffe2e9; color: #263653; }
.tna-calendar-card .days button.today.selected-day { outline: none; }
.tna-calendar-card .days button.marked::after,
.tna-calendar-card .days button.absent::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1px;
  transform: translateX(-50%);
  display: block;
  width: 9px;
  height: 9px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}
.tna-calendar-card .legend { flex-wrap: wrap; gap: 12px 17px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tna-calendar-card .legend .today-dot { background: #13a9ec; }
.tna-day-detail { padding: 15px 4px 0; }
.tna-day-detail h3 { margin-bottom: 12px; color: #586980; font-size: 15px; font-weight: 500; }
.tna-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 18px; }
.tna-detail-grid div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tna-detail-grid span { color: var(--blue); font-size: 12px; }
.tna-detail-grid b { color: #65738a; font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
.tna-day-detail > .subtext { margin-top: 12px; font-size: 10px; }
.tna-middle,.tna-right { display: grid; gap: 16px; }
.tna-actions-card { padding: 15px 14px 13px; }
.tna-actions-card h2 { font-size: 16px; margin-bottom: 12px; }
.tna-actions-copy { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; color: #344158; }
.tna-clock-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid #35405c; border-radius: 50%; font-size: 21px; }
.tna-actions-copy b,.tna-actions-copy small { display: block; }
.tna-actions-copy b { font-size: 13px; }
.tna-actions-copy small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.tna-pill { display: block; width: 48%; min-height: 38px; margin: 8px 0 8px auto; border: 0; border-radius: 22px; color: #fff; background: #302d78; font: 600 12px 'DM Sans',sans-serif; cursor: pointer; }
.tna-pill:hover { background: #24215e; }
.tna-chip-actions { display: flex; gap: 7px; margin-top: 12px; }
.tna-chip-actions button { padding: 5px 10px; border: 1px solid #34317b; border-radius: 16px; background: white; color: #34317b; font-size: 11px; cursor: pointer; }
.tna-view-attendance { margin: 10px 0 0 auto; display: block; }
.tna-leave-card { padding: 15px; }
.tna-leave-card .card-head { margin-bottom: 12px; }
.tna-balance-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.tna-balance-grid button { min-width: 0; padding: 8px 3px 7px; border: 0; border-radius: 8px; color: #fff; background: #08a7e8; cursor: pointer; }
.tna-balance-grid button:nth-child(2) { background: #95ca30; }
.tna-balance-grid button:nth-child(3) { background: #2fc3c4; }
.tna-balance-grid button:nth-child(4) { background: #8d70c7; }
.tna-balance-grid button:nth-child(5) { background: #2375c2; }
.tna-balance-grid button:nth-child(6) { background: #009b70; }
.tna-balance-grid strong,.tna-balance-grid span { display: block; }
.tna-balance-grid strong { font: 600 20px Manrope,sans-serif; }
.tna-balance-grid span { margin-top: 4px; font-size: 9px; line-height: 1.25; }
.balance-unavailable { padding: 16px 13px; border-radius: 8px; background: #f7f8fb; color: #78859a; font-size: 12px; line-height: 1.5; }
.tna-leave-card .text-link { margin-top: 12px; }
.tna-metrics-card { padding: 15px 12px; }
.tna-highlight-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-bottom: 20px; }
.tna-highlight-metrics div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 11px 4px 9px; background: #fbf0f2; text-align: center; }
.tna-highlight-metrics div:nth-child(2) { background: #f3f1f8; }
.tna-highlight-metrics div:nth-child(3) { background: #fbf7eb; }
.tna-highlight-metrics strong { font: 500 23px Manrope,sans-serif; color: #17243b; }
.tna-highlight-metrics b { font-size: 10px; font-weight: 500; }
.tna-metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 20px; }
.tna-metric-grid div { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.tna-metric-grid strong { font: 500 19px Manrope,sans-serif; }
.tna-metric-grid span { color: #65738a; font-size: 10px; }
.tna-metric-note { margin-top: 15px; font-size: 9px; text-align: center; }
.tna-holidays-card { padding: 14px; }
.tna-holidays-card .card-head { margin-bottom: 11px; align-items: center; }

@media (max-width: 1100px) {
  .tna-board { grid-template-columns: minmax(300px,1fr) minmax(300px,1fr); }
  .tna-right { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .tna-board { grid-template-columns: 1fr; gap: 12px; }
  .tna-right { grid-column: auto; grid-template-columns: 1fr; }
  .tna-calendar-card { padding: 16px 12px; }
  .tna-calendar-card .legend { gap: 10px; font-size: 10px; }
  .tna-pill { width: 100%; }
  .tna-highlight-metrics strong { font-size: 21px; }
}

button[hidden],[hidden]{display:none!important}.leave-approver-note{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:16px;background:#f8faff}.leave-approver-note h3{margin:0 0 6px;font-size:14px}.leave-approver-note p{margin:0;color:var(--muted)}


.salary-addresses{display:grid;gap:2px;width:100%;max-width:98%;margin:4px auto;color:#111;font:10px/1.25 Arial,sans-serif;text-align:center}.salary-addresses b{font-weight:700}@media print{.salary-addresses{font-size:9px;line-height:1.2;margin:3px auto}}


.salary-company-logo{background:transparent;border:0;outline:0;box-shadow:none}
.salary-iso-logo{background:transparent;outline:0;box-shadow:none}

.salary-upload-history{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.salary-upload-history h3{margin:0 0 8px;font-size:13px}
.salary-upload-history ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.salary-upload-history li{padding:8px 10px;border:1px solid var(--line);border-radius:9px;color:var(--ink);font-size:12px}
.salary-upload-history li span{margin-left:6px;color:var(--muted)}
.salary-upload-card form>.subtext{margin-top:10px}
.salary-slip-status{margin:0 0 12px;color:#b42318;font-size:13px}
.salary-slip-status:empty{display:none}
@media print{.salary-slip-status,.admin-salary-toolbar{display:none!important}}
 
.biometric-admin-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}.biometric-admin-stat{min-height:112px}.biometric-admin-stat strong{display:block;margin-top:10px;font:700 21px Manrope,sans-serif;color:#243f93}.biometric-admin-stat small{display:block;margin-top:6px;color:var(--muted);font-size:11px}.biometric-admin-toolbar{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(150px,1fr) minmax(150px,1fr) auto;gap:12px;align-items:end;margin-bottom:16px}.biometric-admin-toolbar .field{min-width:0}.biometric-admin-toolbar .primary,.biometric-admin-toolbar .secondary{min-height:38px}.biometric-admin-note{min-height:20px;color:var(--muted);font-size:12px;margin:8px 0}.biometric-admin-import{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px;align-items:end;margin:8px 0}.biometric-admin-import .field{min-width:0}.biometric-admin-import input[type=file]{width:100%;min-height:38px}.biometric-admin-import small{grid-column:1/-1;color:var(--muted);font-size:11px;margin-top:-6px}.biometric-admin-pagination{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px;color:var(--muted);font-size:12px}.biometric-device-form{display:grid;grid-template-columns:minmax(160px,1fr) minmax(150px,1fr) 120px auto;gap:12px;align-items:end}.biometric-device-form .field{min-width:0}.biometric-device-form .primary{min-height:38px}.biometric-status-pill{display:inline-flex;padding:5px 9px;border-radius:18px;font-size:11px;font-weight:700;background:#eef1f6;color:#69768b}.biometric-status-pill.online{background:#e6f6ed;color:#16875d}.biometric-status-pill.offline{background:#fff0ef;color:#b42318}.biometric-admin-table td{vertical-align:middle}
@media(max-width:800px){.biometric-admin-summary{grid-template-columns:1fr}.biometric-admin-toolbar{grid-template-columns:1fr 1fr}.biometric-device-form{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.biometric-admin-toolbar,.biometric-device-form,.biometric-admin-import{grid-template-columns:1fr}.biometric-admin-pagination{justify-content:space-between}}


/* Admin monthly attendance matrix */
.biometric-month-controls{margin-bottom:10px;padding:13px 18px}
.biometric-month-toolbar-row{display:flex;align-items:end;gap:10px}
.biometric-month-toolbar-row .field{width:190px;margin:0}
.biometric-month-toolbar-row .primary,.biometric-month-toolbar-row .secondary{min-height:38px;white-space:nowrap}
.biometric-month-updated{margin-left:auto;color:var(--muted);font-size:11px;padding-bottom:8px;white-space:nowrap}
.biometric-month-warning{margin-top:6px;color:#b42318;font-size:11px}
.biometric-month-warning:empty{display:none}
.biometric-month-days-card,.biometric-month-grid-card{margin-top:10px;padding:14px 18px}
.biometric-month-days-heading{margin:0 0 8px}
.biometric-month-days-heading h2{font-size:15px;margin:0}
.biometric-month-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:5px}
.biometric-footfall-tile{display:flex;min-height:38px;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:6px;background:#f2f5fa;color:#24478d;font-size:9px}
.biometric-footfall-tile strong{font-size:11px;line-height:1.1;color:#16875d}
.biometric-footfall-tile.holiday{background:#f5f0ff}
.biometric-month-grid-toolbar{display:flex;align-items:end;justify-content:space-between;gap:14px}
.biometric-month-grid-card .biometric-admin-note{font-size:10px;line-height:1.35;margin:6px 0}
.biometric-month-grid-toolbar .field{width:min(320px,100%);margin:0}
.biometric-month-grid-toolbar .biometric-admin-pagination{margin:0}
.biometric-month-scroll{max-height:68vh;overflow:auto;border:1px solid var(--line);border-radius:8px;overscroll-behavior:contain}
.biometric-month-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:10px;white-space:nowrap}
.biometric-month-table th,.biometric-month-table td{height:31px;padding:5px 7px;border-right:1px solid #e5eaf1;border-bottom:1px solid #e5eaf1;text-align:center;background:#fff}
.biometric-month-table thead th{position:sticky;top:0;z-index:4;background:#f1f4f9;color:#32445f;font-weight:700}
.biometric-month-table thead tr:nth-child(2) th{top:34px;z-index:4}
.biometric-month-table thead .date-group{height:34px;min-width:174px;background:#e8edf6}
.biometric-month-table .date-group span{margin-right:6px}
.biometric-month-table .date-group small{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:#e3f3e9;color:#16875d;font-size:10px}
.biometric-month-table .month-total-group{background:#dfe8ff}
.biometric-month-table th.employee-name-col,.biometric-month-table td.employee-name-col{position:sticky;left:0;z-index:3;width:150px;min-width:150px;max-width:150px;overflow:hidden;text-overflow:ellipsis;text-align:left}
.biometric-month-table th.employee-code-col,.biometric-month-table td.employee-code-col{position:sticky;left:150px;z-index:3;width:82px;min-width:82px;max-width:82px;overflow:hidden;text-overflow:ellipsis;text-align:left}
.biometric-month-table thead th.employee-name-col,.biometric-month-table thead th.employee-code-col{z-index:7;background:#e8edf6}
.biometric-month-table tbody td.employee-name-col,.biometric-month-table tbody td.employee-code-col{background:#fff}
.biometric-month-table tbody tr:hover td{background:#f6f8fc}
.biometric-month-table tbody tr:hover td.day-p{background:#79BC7A}
.biometric-month-table tbody tr:hover td.day-a{background:#9F1717}
.biometric-month-table tbody tr:hover td.day-wo{background:#B9C5C9}
.biometric-month-table tbody tr:hover td.day-wop{background:#0B4DA2;color:#FFFFFF}
.biometric-month-table tbody tr:hover td.day-h{background:#D7C7EA;color:#3B2355}
.biometric-month-table .time-cell,.biometric-month-table .hours-cell{min-width:48px}
.biometric-month-table .status-cell{min-width:34px;font-weight:700}
.biometric-month-table .day-p{background:#8BCB8B;color:#173A1B}
.biometric-month-table .day-a{background:#B71C1C;color:#FFFFFF}
.biometric-month-table .day-wo{background:#CBD5D8;color:#25343A}
.biometric-month-table .day-wop{background:#0B4DA2;color:#FFFFFF}
.biometric-month-table .day-h{background:#D7C7EA;color:#3B2355}
.biometric-month-table .status-p{color:#173A1B}
.biometric-month-table .status-a{color:#FFFFFF}
.biometric-month-table .status-wo{color:#25343A}
.biometric-month-table .status-wop{color:#FFFFFF}
.biometric-month-table .status-h{color:#3B2355}
.biometric-month-table .month-total-cell{min-width:48px;font-weight:800;background:#f7f8fb}
.biometric-month-table .month-total-cell.status-p{background:#8BCB8B}
.biometric-month-table .month-total-cell.status-a{background:#B71C1C;color:#FFFFFF}
.biometric-month-table .month-total-cell.status-wo{background:#CBD5D8}
@media(max-width:700px){
  .biometric-month-toolbar-row{flex-wrap:wrap}
  .biometric-month-toolbar-row .field{width:min(190px,100%)}
  .biometric-month-updated{width:100%;margin:0;padding:0}
  .biometric-month-grid-toolbar{align-items:stretch;flex-direction:column}
  .biometric-month-grid-toolbar .field{width:100%}
  .biometric-month-grid-toolbar .biometric-admin-pagination{justify-content:space-between}
  .biometric-month-table th.employee-name-col,.biometric-month-table td.employee-name-col{width:120px;min-width:120px;max-width:120px}
  .biometric-month-table th.employee-code-col,.biometric-month-table td.employee-code-col{left:120px}
}
.biometric-month-table .status-cell.status-p{background:#8BCB8B;color:#173A1B}
.biometric-month-table .status-cell.status-a{background:#B71C1C;color:#FFFFFF}
.biometric-month-table .status-cell.status-wo{background:#CBD5D8;color:#25343A}
.biometric-month-table .status-cell.status-wop{background:#0B4DA2;color:#FFFFFF}
.biometric-month-table .status-cell.status-h{background:#D7C7EA;color:#3B2355}

/* Keep monthly totals visible while the daily columns scroll horizontally. */
.biometric-month-table .month-total-group{position:sticky;right:0;z-index:8;min-width:202px;background:#dfe8ff}
.biometric-month-table thead .month-total-p,.biometric-month-table thead .month-total-a,.biometric-month-table thead .month-total-wo,.biometric-month-table thead .month-total-hrs{position:sticky;z-index:8;background:#e8edf6}
.biometric-month-table thead .month-total-p{right:154px;width:48px;min-width:48px;max-width:48px}
.biometric-month-table thead .month-total-a{right:106px;width:48px;min-width:48px;max-width:48px}
.biometric-month-table thead .month-total-wo{right:58px;width:48px;min-width:48px;max-width:48px}
.biometric-month-table thead .month-total-hrs{right:0;width:58px;min-width:58px;max-width:58px}
.biometric-month-table tbody .month-total-p,.biometric-month-table tbody .month-total-a,.biometric-month-table tbody .month-total-wo,.biometric-month-table tbody .month-total-hrs{position:sticky;z-index:3}
.biometric-month-table tbody .month-total-p{right:154px;width:48px;min-width:48px;max-width:48px}
.biometric-month-table tbody .month-total-a{right:106px;width:48px;min-width:48px;max-width:48px}
.biometric-month-table tbody .month-total-wo{right:58px;width:48px;min-width:48px;max-width:48px}
.biometric-month-table tbody .month-total-hrs{right:0;width:58px;min-width:58px;max-width:58px;background:#f7f8fb}
.biometric-month-table .month-total-cell.status-p,.biometric-month-table .month-total-cell.status-a,.biometric-month-table .month-total-cell.status-wo{background:#f7f8fb;color:var(--ink);font-weight:800}
.topbar{position:sticky;top:0;z-index:12;flex-shrink:0}

/* Monthly attendance controls sit between footfall and the data grid. */
.biometric-month-tools{margin:8px 0;padding:8px 12px}
.biometric-month-tools-grid{display:grid;grid-template-columns:minmax(390px,.95fr) minmax(280px,1.05fr);gap:18px;align-items:start}
.biometric-month-tools-left,.biometric-month-tools-right{min-width:0}
.biometric-month-tools-controls{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.biometric-month-tools-controls .field{width:180px;flex:0 0 180px;margin:0}
.biometric-month-tools-controls .primary,.biometric-month-tools-controls .secondary{min-height:36px;padding:8px 11px;white-space:nowrap}
.biometric-month-tools-right .field{width:100%;margin:0}
.biometric-month-tools-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;min-height:30px}
.biometric-month-updated{width:auto;margin:0;padding:0;color:var(--muted);font-size:10px;line-height:1.2;white-space:nowrap}
.biometric-month-tools-meta .biometric-admin-pagination{margin:0;gap:5px;flex:none}
.biometric-month-tools-meta .biometric-admin-pagination button{min-height:29px;padding:6px 9px;font-size:10px}
.biometric-month-tools-meta .biometric-admin-pagination span{font-size:10px;white-space:nowrap}
.biometric-month-tools .biometric-month-warning{grid-column:1/-1}
@media(max-width:1050px){.biometric-month-tools-grid{grid-template-columns:1fr;gap:8px}}
@media(max-width:700px){
  .biometric-month-tools{padding:8px 10px}
  .biometric-month-tools-controls{flex-wrap:wrap}
  .biometric-month-tools-meta{flex-wrap:wrap;justify-content:space-between}
  .biometric-month-tools-right .field{width:100%}
}

.admin-request-filters{display:grid;grid-template-columns:minmax(260px,2fr) minmax(190px,1fr) minmax(210px,1fr);gap:14px;align-items:end;margin-bottom:12px}
.admin-request-filters .field{margin:0}
.admin-request-summary{margin:4px 0 12px}
.admin-request-filters select,.admin-request-filters input{width:100%}
@media(max-width:850px){.admin-request-filters{grid-template-columns:1fr 1fr}.admin-request-filters .field:first-child{grid-column:1/-1}}
@media(max-width:560px){.admin-request-filters{grid-template-columns:1fr}.admin-request-filters .field:first-child{grid-column:auto}}

.admin-salary-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:10px;align-items:end;width:min(100%,820px);margin:0 auto 12px;padding:14px 16px}
.admin-salary-toolbar .field{margin:0;min-width:0}
.admin-salary-toolbar button{min-height:38px;white-space:nowrap}
@media(max-width:700px){.admin-salary-toolbar{grid-template-columns:1fr 1fr}.admin-salary-toolbar .field{grid-column:1/-1}}
@media(max-width:460px){.admin-salary-toolbar{grid-template-columns:1fr}.admin-salary-toolbar .field{grid-column:auto}.admin-salary-toolbar button{width:100%}}

/* Employee password change and administrator reset page */
.account-security-card{max-width:820px;margin-bottom:14px}
.account-security-card>h2{margin-bottom:6px}
.account-security-card>.subtext{margin-bottom:16px}
.account-security-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
.account-security-form .field{min-width:0}
.account-security-form .primary,.account-security-form .secondary{min-height:38px;white-space:nowrap}
.account-security-actions{display:flex;justify-content:flex-end}
.account-security-status{min-height:18px;margin-top:10px;color:var(--green);font-size:11px;line-height:1.5}
.account-security-status.error{color:#b42318}
.account-reset-form{grid-template-columns:minmax(220px,1fr) auto}
@media(max-width:700px){.account-security-form{grid-template-columns:1fr}.account-security-actions{justify-content:stretch}.account-security-actions button{width:100%}}

/* Compact language switch for the sign-in and first-password screens */
.auth-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:26px}.auth-heading .auth-brand{margin-bottom:0}.auth-language-switch{display:flex;align-items:center;gap:4px}.auth-language-switch button{border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--muted);padding:5px 8px;font:600 11px "DM Sans",sans-serif;cursor:pointer}.auth-language-switch button[aria-pressed="true"]{border-color:#d8e1ff;background:#eef2ff;color:var(--blue)}.auth-gate[lang="kn"] .auth-card,.auth-gate[lang="kn"] .auth-card button,.auth-gate[lang="kn"] .auth-card input,.auth-gate[lang="kn"] .auth-card label{font-family:"Nirmala UI","Noto Sans Kannada","DM Sans",sans-serif}

/* Mobile workspace: app-like navigation, readable cards, and a usable drawer. */
.mobile-bottom-nav{display:none}
@media(max-width:700px){
  body{overflow-x:hidden}
  .main{margin-left:0;min-height:100dvh;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .topbar{height:56px;min-height:56px;padding:0 13px;gap:10px;position:sticky;top:0;z-index:30}
  .mobile-nav-toggle{width:38px;height:38px;border-radius:12px;font-size:18px}
  .crumb{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .crumb span,.crumb b{display:none}
  .top-actions{gap:7px}
  .top-actions .icon-btn{width:34px;height:34px}
  .top-actions .avatar{width:32px;height:32px}
  .content{width:100%;padding:15px 12px 20px;flex:1}
  footer{display:none}
  .sidebar{width:min(300px,86vw);z-index:52;padding:18px 14px calc(16px + env(safe-area-inset-bottom));box-shadow:10px 0 30px #17243b25}
  .sidebar.mobile-open{z-index:52}
  body.sidebar-open:before{z-index:50;background:#17243b66;pointer-events:auto}
  .brand{margin:2px 8px 20px}
  .sidebar-bottom,.profile{display:flex}
  .nav-item,.nav-item.active{font-size:14px!important;justify-content:flex-start;padding:0 12px}
  .nav-item span{font-size:17px}
  .side-label{font-size:10px!important}
  .mobile-bottom-nav{position:fixed;z-index:45;left:50%;bottom:calc(7px + env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:min(520px,calc(100% - 18px));padding:6px 5px;background:#fff;border:1px solid #e5eaf2;border-radius:18px;box-shadow:0 6px 24px #17243b22;backdrop-filter:blur(14px)}
  .mobile-tab{min-width:0;min-height:52px;border:0;border-radius:13px;background:transparent;color:#748198;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 10px 'DM Sans',sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mobile-tab-icon{font:500 20px/1 'DM Sans',sans-serif}
  .mobile-tab.is-active{background:#eef2ff;color:#365ce5}
  .mobile-tab.is-active .mobile-tab-icon{font-weight:700}
  .welcome{align-items:flex-start;gap:9px;margin-bottom:15px}
  .welcome h1{font-size:22px;line-height:1.25}
  .welcome .subtext{font-size:12px;line-height:1.45}
  .eyebrow{font-size:10px;margin-bottom:6px}
  .date-chip{padding:8px 10px}
  .page-banner{padding:16px;border-radius:14px;margin-bottom:12px;gap:12px}
  .page-banner h1{font-size:20px;margin-bottom:4px}
  .page-banner .subtext{line-height:1.45}
  .card{padding:15px;border-radius:14px}
  h2{font-size:16px}
  .section-row{margin:17px 0 10px}
  .grid{gap:11px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:12px}
  .stat{padding:11px;gap:8px;align-items:flex-start}
  .stat-icon{width:30px;height:30px;flex:0 0 30px}
  .stat-value{font-size:17px}
  .stat-label{font-size:10px;line-height:1.35}
  .stat-meta{font-size:9px;line-height:1.35}
  .dashboard-columns{display:grid;grid-template-columns:1fr;gap:11px}
  #page-content:has(.attendance-card){display:flex;flex-direction:column;align-items:stretch;gap:11px}
  #page-content:has(.attendance-card)>.welcome,
  #page-content:has(.attendance-card)>.notice,
  #page-content:has(.attendance-card)>.stats,
  #page-content:has(.attendance-card)>.section-row,
  #page-content:has(.attendance-card)>.module-grid,
  #page-content:has(.attendance-card) .attendance-card,
  #page-content:has(.attendance-card) .dashboard-columns>.card{width:100%;grid-column:auto;grid-row:auto;margin-bottom:0}
  #page-content:has(.attendance-card)>.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #page-content:has(.attendance-card)>.dashboard-columns{display:grid;grid-template-columns:1fr;gap:11px}
  .attendance-card{min-height:0}
  .quick-actions{gap:8px}
  .action{min-height:54px;padding:10px}
  .action b{font-size:12px}
  .action small{font-size:10px}
  .module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:1fr;gap:12px}
  .field.wide{grid-column:auto}
  .field label{font-size:12px}
  .field input,.field select,.field textarea{font-size:16px;min-height:44px}
  button.primary,button.secondary,.form-actions button{min-height:42px}
  .form-actions{gap:8px;flex-wrap:wrap}
  .form-actions button{flex:1 1 130px}
  .table-wrap,.biometric-month-scroll{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
  .table th,.table td{padding:9px 10px;font-size:11px}
  .biometric-month-days-card,.biometric-month-grid-card{padding:12px;margin-top:8px}
  .biometric-month-days{grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:5px}
  .biometric-month-days>*{min-height:42px}
  .biometric-month-tools{padding:11px;margin:8px 0}
  .biometric-month-tools-grid{grid-template-columns:1fr;gap:9px}
  .biometric-month-tools-controls{display:flex;flex-wrap:wrap;gap:7px}
  .biometric-month-tools-controls .field{flex:1 1 145px;width:auto}
  .biometric-month-tools-controls button{flex:1 1 auto;min-height:42px}
  .biometric-month-tools-meta{gap:7px;min-height:0}
  .biometric-month-updated{font-size:10px}
  .biometric-month-table{font-size:10px}
  .biometric-month-table th,.biometric-month-table td{height:34px;padding:5px 6px}
  .biometric-month-table th.employee-name-col,.biometric-month-table td.employee-name-col{width:110px;min-width:110px;max-width:110px}
  .biometric-month-table th.employee-code-col,.biometric-month-table td.employee-code-col{left:110px;width:60px;min-width:60px;max-width:60px}
  .biometric-month-grid-card .biometric-month-scroll{max-height:65dvh;overflow:auto;overscroll-behavior:contain}
  .biometric-admin-summary{grid-template-columns:1fr;gap:9px}
  .biometric-admin-stat{min-height:0;padding:14px}
  .biometric-admin-toolbar,.biometric-device-form,.biometric-admin-import{grid-template-columns:1fr;gap:10px}
  .biometric-admin-pagination{gap:6px;flex-wrap:wrap}
  .account-security-form{grid-template-columns:1fr}
  .auth-card{width:min(100% - 28px,430px);padding:24px 20px}
}
@media(max-width:390px){
  .content{padding-left:9px;padding-right:9px}
  .mobile-bottom-nav{width:calc(100% - 12px)}
  .mobile-tab{font-size:9px}
  .mobile-tab-icon{font-size:19px}
  .stat{padding:9px}
  .biometric-month-table th.employee-name-col,.biometric-month-table td.employee-name-col{width:96px;min-width:96px;max-width:96px}
  .biometric-month-table th.employee-code-col,.biometric-month-table td.employee-code-col{left:96px;width:56px;min-width:56px;max-width:56px}
}


/* Mobile drawer must cover sticky attendance cells on narrow screens. */
@media(max-width:700px){.sidebar,.sidebar.mobile-open{z-index:10020!important}body.sidebar-open:before{z-index:10010!important}.mobile-bottom-nav{z-index:10005}}

@media(min-width:714px){.biometric-roster-import{grid-template-columns:minmax(220px,1fr) auto auto}}

/* Readability pass: increase everyday type without changing the page layout. */
body{font-size:16px}
.subtext{font-size:14px;line-height:1.5}
.field label{font-size:14px}
.field input,.field select,.field textarea{font-size:15px}
.table th{font-size:12px}
.table td{font-size:13px}
.crumb{font-size:14px}
.side-label{font-size:12px}
.nav-item,.nav-item.active{font-size:15px}
.biometric-month-days-heading h2{font-size:17px}
.biometric-footfall-tile{min-height:44px;font-size:11px;line-height:1.2}
.biometric-footfall-tile strong{font-size:13px}
.biometric-month-table{font-size:12px}
.biometric-month-table th,.biometric-month-table td{height:36px;padding:6px 8px}
.biometric-month-table .date-group small{font-size:11px}
.biometric-month-updated,.biometric-month-grid-card .biometric-admin-note{font-size:12px}
.biometric-month-tools-meta .biometric-admin-pagination button,.biometric-month-tools-meta .biometric-admin-pagination span{font-size:12px}

@media(max-width:700px){
  body{font-size:16px}
  .crumb{font-size:14px}
  .side-label{font-size:11px!important}
  .nav-item,.nav-item.active{font-size:15px!important}
  .mobile-tab{font-size:11px}
  .welcome h1{font-size:24px}
  .welcome .subtext,.page-banner .subtext{font-size:14px;line-height:1.5}
  .eyebrow{font-size:11px}
  .page-banner h1{font-size:22px}
  h2{font-size:18px}
  .stat-label{font-size:11px;line-height:1.4}
  .stat-meta{font-size:10px;line-height:1.4}
  .table th,.table td{font-size:12px}
  .biometric-month-days-card,.biometric-month-grid-card{padding:13px}
  .biometric-month-days{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:6px}
  .biometric-month-days>*{min-height:46px}
  .biometric-footfall-tile{font-size:11px}
  .biometric-footfall-tile strong{font-size:13px}
  .biometric-month-updated,.biometric-month-grid-card .biometric-admin-note{font-size:12px}
  .biometric-month-table{font-size:12px}
  .biometric-month-table th,.biometric-month-table td{height:38px;padding:6px 7px}
  .biometric-month-table th.employee-name-col,.biometric-month-table td.employee-name-col{width:122px;min-width:122px;max-width:122px}
  .biometric-month-table th.employee-code-col,.biometric-month-table td.employee-code-col{left:122px;width:64px;min-width:64px;max-width:64px}
}
@media(max-width:390px){
  .biometric-month-table th.employee-name-col,.biometric-month-table td.employee-name-col{width:108px;min-width:108px;max-width:108px}
  .biometric-month-table th.employee-code-col,.biometric-month-table td.employee-code-col{left:108px;width:60px;min-width:60px;max-width:60px}
}

/* Extra-large attendance text requested after the first mobile preview. */
.biometric-month-table{font-size:14px}
.biometric-month-table th,.biometric-month-table td{height:40px;padding:7px 9px}
.biometric-footfall-tile{font-size:12px;min-height:48px}
.biometric-footfall-tile strong{font-size:15px}
.biometric-month-days-heading h2{font-size:18px}
@media(max-width:700px){
  .biometric-month-table{font-size:14px}
  .biometric-month-table th,.biometric-month-table td{height:42px;padding:7px 8px}
  .biometric-month-table th.employee-name-col,.biometric-month-table td.employee-name-col{width:130px;min-width:130px;max-width:130px}
  .biometric-month-table th.employee-code-col,.biometric-month-table td.employee-code-col{left:130px;width:70px;min-width:70px;max-width:70px}
  .biometric-footfall-tile{font-size:12px;min-height:48px}
  .biometric-footfall-tile strong{font-size:15px}
  .biometric-month-updated,.biometric-month-grid-card .biometric-admin-note{font-size:13px}
  .biometric-month-tools-meta .biometric-admin-pagination button,.biometric-month-tools-meta .biometric-admin-pagination span{font-size:13px}
}
@media(max-width:390px){
  .biometric-month-table th.employee-name-col,.biometric-month-table td.employee-name-col{width:116px;min-width:116px;max-width:116px}
  .biometric-month-table th.employee-code-col,.biometric-month-table td.employee-code-col{left:116px;width:66px;min-width:66px;max-width:66px}
}

/* Flag daily worked-hour cells below seven hours. */
.biometric-month-table tbody td.hours-under-seven,
.biometric-month-table tbody tr:hover td.hours-under-seven{background:#ffe3a3!important;color:#542900!important;font-weight:800}

/* Large desktop monthly attendance layout; laptop and phone layouts stay as designed. */
@media(min-width:1500px){
  #page-content:has(.biometric-month-days-card){width:100%;max-width:none;padding-left:48px;padding-right:48px}
  .biometric-month-days-card{padding:20px 24px}
  .biometric-month-days-heading h2{font-size:20px;color:#111827;margin-bottom:12px}
  .biometric-month-days{grid-template-columns:repeat(16,minmax(0,1fr));gap:9px;align-items:stretch}
  .biometric-month-days .biometric-footfall-tile{width:100%;min-height:58px;border:1px solid #e1e6ee;border-radius:9px;background:#f5f7fa;color:#111827;font-size:14px;font-weight:700;line-height:1.25}
  .biometric-month-days .biometric-footfall-tile strong{font-size:17px;font-weight:800;color:#16875d}
}