*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:#f4f7fb;color:#17345d}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}:root{--nav:#0b2448;--nav2:#071a34;--blue:#2878f0;--line:#e3eaf4;--panel:#fff;--bg:#f4f7fb;--text:#17345d;--muted:#7d8da4;--green:#22a565;--red:#e54b60;--orange:#efa326;--purple:#7362e7;--shadow:0 5px 18px rgba(25,62,106,.055);--r:13px}.app{min-height:100vh}.sidebar{position:fixed;right:0;top:0;bottom:0;width:236px;background:linear-gradient(180deg,#0d284f,#091d3a 82%);z-index:50;color:#fff;overflow:auto;box-shadow:-7px 0 28px rgba(8,30,58,.08)}.brand{height:74px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08)}.brand-logo{width:42px;height:42px}.brand b{display:block;font-size:18px}.brand small{display:block;font-size:9px;color:#8ea6ca;margin-top:2px}.sidebar-close{display:none;margin-right:auto;width:30px;height:30px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;font-size:18px}.sidebar nav{padding:8px 9px 28px}.sidebar h6{margin:13px 11px 4px;color:#6d86aa;font-size:9px;font-weight:700}.sidebar nav button{width:100%;min-height:36px;border:0;background:transparent;color:#e5edf8;border-radius:8px;padding:8px 10px;margin:1px 0;display:flex;align-items:center;gap:9px;text-align:right}.sidebar nav button span{width:18px;text-align:center;font-size:13px}.sidebar nav button b{font-size:11.5px;font-weight:600}.sidebar nav button:hover{background:rgba(255,255,255,.06)}.sidebar nav button.active{background:linear-gradient(90deg,#1976e9,#2d84f1);box-shadow:0 7px 18px rgba(18,107,218,.25)}.live-mark{color:#ff5063}.main-shell{margin-right:236px;min-height:100vh}.topbar{height:66px;background:#fff;border-bottom:1px solid var(--line);display:grid;grid-template-columns:250px minmax(320px,560px) 1fr;align-items:center;padding:0 16px;gap:14px;position:sticky;top:0;z-index:40}.page-title{display:flex;align-items:center;gap:8px}.page-title h2{margin:0;font-size:17px}.page-title small{font-size:9px;color:#8a9ab0}.menu-btn{display:none;width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:#fff}.top-search{height:37px;border:1px solid #dce5f0;background:#f9fbfe;border-radius:9px;display:flex;align-items:center;padding:0 10px;gap:8px;justify-self:center;width:100%}.top-search input{border:0;outline:0;background:transparent;width:100%;font-size:10.5px;color:#52667f}.top-search span{color:#6f87a5}.top-search kbd{font-size:8px;border:1px solid #dfe7f1;border-radius:5px;background:#fff;padding:3px 6px;color:#8a98aa}.top-actions{display:flex;align-items:center;gap:8px;justify-content:flex-start;direction:ltr}.icon-btn,.logout{height:34px;border:1px solid #dfe7f1;background:#fff;border-radius:8px;color:#395575}.icon-btn{width:34px}.logout{padding:0 11px;font-size:9px}.user-mini{text-align:left}.user-mini b{font-size:10px;display:block}.user-mini small{font-size:7.5px;color:#8d9bad}.content{padding:10px 14px 28px;max-width:1800px;margin:auto}.sidebar-backdrop,.mobile-nav{display:none}
/* dashboard */.dash{display:grid;gap:9px}.hero{height:119px;border:1px solid #dbe7f3;border-radius:12px;overflow:hidden;background:linear-gradient(90deg,#d8edfb 0%,#e9f6ff 38%,#f8fcff 100%);position:relative;box-shadow:var(--shadow);display:grid;grid-template-columns:31% 1fr 170px;align-items:center}.hero-left{height:100%;background:url('/static/noah-hero-left.png') center/cover no-repeat}.hero-main{padding:0 26px;text-align:right;position:relative;z-index:2}.hero-main h1{margin:0;color:#102e57;font-size:28px;line-height:1.2}.hero-main h1 strong{font-size:31px}.hero-main p{margin:5px 0 0;font-size:11px;color:#506e91}.hero-main small{display:block;margin-top:5px;font-size:8.5px;color:#8192a8}.hero-date{padding-left:18px;text-align:left}.hero-date b{font-size:9px;display:block}.hero-date span{font-size:8px;color:#72859d;display:block;margin:3px 0}.hero-date strong{font-size:18px}.kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.kpi{min-height:91px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:11px;display:grid;grid-template-columns:42px 1fr;gap:9px;align-items:center}.kpi-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#eef4ff;color:#3f70d8;font-size:17px}.kpi.green .kpi-ico{background:#e9f9f0;color:#1a9a60}.kpi.red .kpi-ico{background:#fff0f2;color:#d84959}.kpi.orange .kpi-ico{background:#fff6e5;color:#e19119}.kpi.pink .kpi-ico{background:#fff0f7;color:#ce4c8a}.kpi.cyan .kpi-ico{background:#e9f8ff;color:#2c90d1}.kpi.purple .kpi-ico{background:#f1eeff;color:#705bdc}.kpi span{display:block;font-size:8.7px;color:#697c96}.kpi b{display:block;font-size:21px;color:#102e57;line-height:1.15;margin:2px 0}.kpi small{font-size:7.2px;color:#909daf}.row1{display:grid;grid-template-columns:2.12fr 1.15fr 1.13fr .92fr;gap:8px}.row2{display:grid;grid-template-columns:1.18fr 1fr 1.08fr;gap:8px}.row3{display:grid;grid-template-columns:2.4fr 1fr;gap:8px}.card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}.row1>.card{min-height:263px}.row2>.card{min-height:181px}.row3>.card{min-height:145px}.card-head{height:42px;border-bottom:1px solid #e8eef6;display:flex;align-items:center;justify-content:space-between;padding:0 11px}.card-head b{font-size:11px}.card-head a,.card-head span{font-size:7.8px;color:#3676c5;text-decoration:none}.card-body{padding:10px 11px}.month-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}.month-tile{text-align:center;padding:8px 4px;border-radius:8px;background:#f4f8fd}.month-tile.green{background:#eaf8ef;color:#188052}.month-tile.red{background:#fff0f2;color:#c74655}.month-tile.blue{background:#eef5ff;color:#346ebb}.month-tile.purple{background:#f3efff;color:#6e5bd1}.month-tile span{font-size:7.3px}.month-tile b{display:block;font-size:17px}.month-tile small{font-size:6.8px}.chart{height:124px}.chart svg{width:100%;height:100%}.donut-wrap{height:209px;display:grid;grid-template-columns:126px 1fr;gap:8px;align-items:center;padding:10px 11px}.donut{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) var(--p),#e9eff6 0);position:relative}.donut:before{content:"";position:absolute;width:78px;height:78px;border-radius:50%;background:#fff}.donut>div{position:relative;text-align:center}.donut b{font-size:21px}.donut span{display:block;font-size:7px;color:#7c8da3}.legend{display:grid;gap:5px}.legend div{display:flex;align-items:center;justify-content:space-between;background:#f8fafe;border-radius:7px;padding:6px 7px;font-size:8px}.legend i{width:7px;height:7px;border-radius:50%;display:inline-block;margin-left:5px}.quick3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.quick3>div{text-align:center;background:#f5f9fd;border-radius:8px;padding:9px 4px;position:relative}.quick3 span{display:block;font-size:7.2px;color:#71829a}.quick3 b{display:block;font-size:15px}.quick3 em{position:absolute;left:6px;top:6px;font-size:11px;font-style:normal}.progress-title{display:flex;justify-content:space-between;margin-top:12px;color:#667b96;font-size:7.5px}.progress-title b{font-size:8px}.progress{height:6px;background:#ecf1f6;border-radius:99px;overflow:hidden;margin:5px 0 11px}.progress i{height:100%;display:block;background:linear-gradient(90deg,#2c7df1,#71a9fb)}.action{width:100%;height:31px;border:0;border-radius:7px;background:#eaf3ff;color:#2467be;font-size:8.2px}.action.primary{background:#2677ed;color:#fff}.shift-list{padding:1px 0}.shift-row{display:grid;grid-template-columns:29px 1fr 26px;gap:7px;align-items:center;padding:8px 9px;border-bottom:1px solid #edf1f6}.shift-row:last-child{border-bottom:0}.shift-icon{width:27px;height:27px;border-radius:8px;background:#f1f6fc;display:grid;place-items:center}.shift-row b{display:block;font-size:8.6px}.shift-row span{font-size:7px;color:#7c8ca1}.shift-row strong{font-size:10px}.live-badge{color:#1a9a60!important}.pay-total{text-align:center;padding:3px 0 8px}.pay-total span{font-size:7.5px;color:#77899f}.pay-total b{display:block;font-size:22px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.three>div{text-align:center;border-radius:8px;background:#eef5ff;padding:8px 4px;position:relative}.three .green{background:#eaf8ef}.three .red{background:#fff0f2}.three span{font-size:7px}.three b{display:block;font-size:10px}.three em{position:absolute;left:6px;top:6px;font-style:normal}.online{display:flex;align-items:center;gap:6px;color:#188259;font-size:8px;margin-bottom:8px}.online i{width:8px;height:8px;border-radius:50%;background:#1ca66a;box-shadow:0 0 0 4px #e9f8f0}.tabs{height:31px;display:flex;align-items:center;gap:5px;padding:4px 9px;border-bottom:1px solid #e9eef6}.tabs button{border:0;border-radius:99px;background:#f1f5fb;color:#68809d;padding:5px 9px;font-size:7.3px}.tabs button.active{background:#2c78ef;color:#fff}.table-head,.table-row{display:grid;grid-template-columns:28px 1.2fr 1.1fr .8fr .8fr;align-items:center;gap:6px;padding:5px 10px}.table-head{font-size:7px;background:#f7faff;color:#73839a;border-bottom:1px solid #e9eef6}.table-row{font-size:7.5px;border-bottom:1px solid #eef2f6;min-height:27px}.table-row:last-child{border-bottom:0}.emp-cell{display:flex;align-items:center;gap:6px}.avatar{width:21px;height:21px;border-radius:50%;background:#e7f1ff;color:#2268c6;display:grid;place-items:center;font-size:6px;font-weight:700}.followups{padding:3px 10px}.follow-row{display:grid;grid-template-columns:47px 20px 1fr;gap:6px;align-items:center;padding:7px 2px;border-bottom:1px solid #edf1f6}.follow-row:last-child{border-bottom:0}.follow-row time{font-size:7.5px;color:#7b90aa}.follow-icon{font-size:11px;text-align:center}.follow-row b{display:block;font-size:8px}.follow-row small{font-size:6.8px;color:#7c8ca0}
/* generic app surfaces */.panel{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}.toolbar,.filters{background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:10px 11px;margin-bottom:9px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.input,.select,textarea{min-height:37px;border:1px solid #dfe7f1;background:#fbfdff;border-radius:8px;padding:7px 9px;color:#28476e}.input:focus,.select:focus,textarea:focus{outline:0;border-color:#94baf0;box-shadow:0 0 0 3px rgba(41,121,239,.08)}.btn{border:1px solid #dfe7f1;background:#fff;color:#365675;border-radius:8px;padding:7px 11px;font-size:10px}.btn.primary{border:0;background:#2878f0;color:#fff}.btn.soft{background:#eef5ff;color:#2e69b8}.btn.success{background:#1a9b67;color:#fff;border:0}.btn.danger{background:#df4d5c;color:#fff;border:0}.btn.ghost{background:#fff}.full{width:100%}.grid{display:grid;gap:9px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.form-grid .full{grid-column:1/-1}.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}.table-wrap table,table{width:100%;border-collapse:collapse;font-size:10px}th{background:#f7faff;color:#6f8198;font-size:8.5px}th,td{padding:9px 10px;border-bottom:1px solid #edf1f6;text-align:right;white-space:nowrap}.muted{color:#8492a5}.small{font-size:9px}.error{color:#c94453;font-size:9px;margin-top:7px}.modal{position:fixed;inset:0;background:rgba(7,25,48,.48);z-index:100;display:grid;place-items:center;padding:18px}.modal-card{width:min(760px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;padding:20px;box-shadow:0 35px 90px rgba(6,25,49,.25);position:relative}.close{position:absolute;left:12px;top:10px;width:30px;height:30px;border:0;background:#f2f5f9;border-radius:8px}.toast{position:fixed;left:22px;bottom:22px;z-index:120;background:#0c2447;color:white;border-radius:9px;padding:10px 14px;font-size:10px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1}.login-view{min-height:100vh;background:linear-gradient(135deg,#edf6ff,#f8fbff);display:grid;place-items:center;padding:25px}.login-panel{width:min(1080px,96vw);min-height:620px;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1.25fr .75fr;box-shadow:0 32px 90px rgba(18,52,94,.14)}.login-art{background:linear-gradient(rgba(7,31,60,.08),rgba(7,31,60,.28)),url('/static/noah-hero-left.png') center/cover no-repeat;padding:36px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}.login-logo{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.88);color:#13345e;width:max-content;padding:9px 11px;border-radius:12px}.login-logo img{width:39px}.login-logo b{font-size:18px;display:block}.login-logo span{font-size:8px;color:#71849e}.login-copy h1{font-size:38px;line-height:1.25;margin:10px 0}.login-copy p{font-size:12px;line-height:1.8}.login-copy>span{font-size:9px;border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:5px 9px}.login-form{padding:45px;display:flex;flex-direction:column;justify-content:center}.login-form>small{color:#2878f0;font-size:8px;font-weight:800;letter-spacing:1px}.login-form h2{font-size:27px;margin:7px 0 3px}.login-form p{font-size:10px;color:#7d8da3;margin:0 0 18px}.login-form label{font-size:9px;margin:4px 0}.login-form .input{height:43px;margin-bottom:8px}.login-btn{height:42px;margin-top:8px}.mobile-brand{display:none}
@media(max-width:1380px){.kpis{grid-template-columns:repeat(4,1fr)}.row1{grid-template-columns:1.65fr 1fr 1fr}.row1>.card:last-child{grid-column:span 3}.row2{grid-template-columns:1fr 1fr}.row2>.card:last-child{grid-column:span 2}.row3{grid-template-columns:1.7fr 1fr}.topbar{grid-template-columns:220px 1fr 1fr}}
@media(max-width:900px){.top-search{display:none}.kpis{grid-template-columns:repeat(3,1fr)}.row1,.row2,.row3{grid-template-columns:1fr 1fr}.row1>.card:last-child,.row2>.card:last-child{grid-column:auto}.hero{grid-template-columns:36% 1fr}.hero-date{display:none}.main-shell{margin-right:210px}.sidebar{width:210px}}
@media(max-width:760px){body{padding-bottom:64px}.sidebar{right:auto;left:0;width:min(86vw,330px);transform:translateX(-105%);transition:.22s;z-index:80;box-shadow:14px 0 40px rgba(5,22,43,.3)}.sidebar.open{transform:translateX(0)}.sidebar-close{display:block}.sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(5,20,40,.45);z-index:70}.main-shell{margin-right:0}.topbar{height:58px;grid-template-columns:1fr auto;padding:0 9px}.page-title h2{font-size:14px}.page-title small{display:none}.menu-btn{display:grid;place-items:center}.top-actions .desktop-only,.top-actions .user-mini,.logout{display:none}.content{padding:8px}.hero{height:136px;grid-template-columns:1fr;background:linear-gradient(90deg,#d7efff,#f8fcff)}.hero-left{position:absolute;inset:0 45% 0 0;opacity:.78}.hero-main{padding:0 15px;z-index:2}.hero-main h1{font-size:23px}.hero-main h1 strong{font-size:25px}.hero-main p{font-size:10px}.kpis{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.kpi{min-width:168px;scroll-snap-align:start}.row1,.row2,.row3{grid-template-columns:1fr}.row1>.card,.row2>.card,.row3>.card{min-height:auto!important}.row1>.card:last-child,.row2>.card:last-child{grid-column:auto}.month-tiles{grid-template-columns:1fr 1fr}.donut-wrap{height:auto}.table-head{display:none}.table-row{grid-template-columns:27px 1fr auto}.table-row>span:nth-child(3),.table-row>span:nth-child(4){display:none}.g2,.g3,.g4,.form-grid{grid-template-columns:1fr}.toolbar,.filters{align-items:stretch;flex-direction:column}.toolbar>*{width:100%}.filters>*{width:100%!important}.table-wrap{max-width:calc(100vw - 16px)}.table-wrap table{min-width:820px}.modal{padding:7px}.modal-card{width:100%;max-height:94vh;padding:16px}.mobile-nav{display:grid;position:fixed;left:0;right:0;bottom:0;height:62px;background:rgba(255,255,255,.98);border-top:1px solid var(--line);z-index:60;grid-template-columns:repeat(5,1fr);box-shadow:0 -7px 20px rgba(20,55,96,.08)}.mobile-nav button{border:0;background:transparent;color:#6d819c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.mobile-nav button span{font-size:16px}.mobile-nav button small{font-size:7px}.login-view{padding:0}.login-panel{display:block;width:100%;min-height:100vh;border:0;border-radius:0}.login-art{display:none}.login-form{min-height:100vh;padding:28px 22px}.mobile-brand{display:flex;align-items:center;gap:9px;margin-bottom:45px}.mobile-brand img{width:40px}.mobile-brand b{font-size:21px}}
/* final reference alignment: photo left, greeting right */
@media(min-width:761px){.hero{direction:ltr;grid-template-columns:31% 1fr}.hero-left{grid-column:1}.hero-main{grid-column:2;direction:rtl;text-align:right;padding-right:34px}.hero-date{display:none}}

/* ===== Noah HR v3.1 UI review + font clarity patch ===== */
html{font-size:15px}
body{
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  color:#17345d;
}
.page-title h2{font-size:1.6rem;font-weight:800;letter-spacing:-.01em}
.page-title small{font-size:.86rem;color:#7488a1}
.top-search input{font-size:.96rem}
.top-search kbd{font-size:.74rem}
.user-mini b{font-size:.92rem}.user-mini small{font-size:.76rem}
.logout,.icon-btn,.btn{font-size:.92rem;font-weight:700}

.sidebar nav button{min-height:42px;padding:9px 12px}
.sidebar nav button b{font-size:.97rem;font-weight:700;line-height:1.35}
.sidebar h6{font-size:.74rem;letter-spacing:.02em}
.brand b{font-size:1.28rem;font-weight:800}.brand small{font-size:.78rem}

.panel,.card,.toolbar,.filters,.hero,.kpi{border-radius:14px}
.panel-head,.card-head{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 14px;
  border-bottom:1px solid #e8eef6;
}
.panel-head b,.card-head b{font-size:1rem;font-weight:800;color:#17345d}
.panel-head a,.card-head a,.card-head span,.link{font-size:.86rem;color:#2f75d6;text-decoration:none;cursor:pointer}
.card-body{padding:14px}

.kpi{padding:14px;min-height:104px;display:grid;grid-template-columns:48px 1fr;align-items:center;gap:12px}
.kpi-icon,.kpi-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#eef4ff;color:#3f70d8;font-size:1.2rem;font-weight:700}
.kpi.good .kpi-icon,.kpi.green .kpi-icon,.kpi.green .kpi-ico{background:#e9f9f0;color:#1a9a60}
.kpi.bad .kpi-icon,.kpi.red .kpi-icon,.kpi.red .kpi-ico{background:#fff0f2;color:#d84959}
.kpi.warn .kpi-icon,.kpi.orange .kpi-icon,.kpi.orange .kpi-ico{background:#fff6e5;color:#e19119}
.kpi.blue .kpi-icon,.kpi.cyan .kpi-icon,.kpi.cyan .kpi-ico{background:#e9f8ff;color:#2c90d1}
.kpi.purple .kpi-icon,.kpi.purple .kpi-ico{background:#f1eeff;color:#705bdc}
.kpi span{display:block;font-size:.88rem;font-weight:600;color:#6c7e97}
.kpi b{display:block;font-size:1.9rem;color:#102e57;line-height:1.15;margin-top:2px;font-weight:800}
.kpi small{font-size:.78rem;color:#8fa0b3}
.grid.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.compact-kpis .kpi{min-height:88px}
.dashboard-kpis .kpi{min-height:96px}

.hero-main p,.hero-main small{font-size:.9rem}
.hero-main h1{font-size:2rem;font-weight:800}.hero-main h1 strong{font-size:2.15rem}
.hero-date b{font-size:.9rem}.hero-date span{font-size:.82rem}.hero-date strong{font-size:1.28rem}

.month-tile span{font-size:.82rem;font-weight:600}.month-tile b{font-size:1.45rem;font-weight:800}.month-tile small{font-size:.78rem}
.legend div,.follow-row b,.shift-row b,.quick3 span,.three span,.online,.progress-title,.progress-title b{font-size:.86rem}
.legend div{padding:8px 9px}
.quick3>div,.three>div{padding:10px 6px}.quick3 b{font-size:1.15rem}.three b{font-size:.96rem}
.shift-row span,.follow-row small{font-size:.78rem}.shift-row strong{font-size:1rem}
.pay-total b{font-size:2rem}.pay-total span{font-size:.84rem}

.table-wrap table,table{font-size:.96rem}
th{font-size:.84rem;font-weight:800;color:#657a96;background:#f6f9fd}
td{font-size:.93rem;color:#17345d}
th,td{padding:11px 12px}
.table-head{font-size:.82rem;font-weight:700}
.table-row{font-size:.92rem;min-height:38px;padding:7px 12px}
.table-row b,.emp-cell b,.employee-name{font-size:.93rem;font-weight:700}
.table-row small,.muted,.small{font-size:.82rem;color:#7f90a6}
.avatar{width:26px;height:26px;font-size:.72rem}

.status{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:999px;font-size:.8rem;font-weight:800;line-height:1}
.status.st-green{background:#eaf8ef;color:#188052}
.status.st-orange{background:#fff6e5;color:#bf7c0f}
.status.st-blue{background:#eef5ff;color:#346ebb}
.status.st-gray{background:#f1f4f8;color:#6d7f97}
.presence-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#eaf8ef;color:#188052;font-weight:800;font-size:.8rem}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#20b16c}

.input,.select,textarea{font-size:.95rem;font-weight:600;min-height:40px}
.filters,.toolbar{padding:12px 14px}
.filter-card,.info-note,.success-note,.warning-note,.error-card,.result-box{
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)
}
.info-note,.success-note,.warning-note{padding:12px 14px;margin-top:10px;font-size:.9rem}
.warning-note{background:#fffaf0}.success-note{background:#f2fbf6}
.narrow{max-width:120px}.short-input{max-width:110px}.wide{min-width:220px}
.actions,.excel-actions,.row-actions,.modal-actions,.period-actions,.tabs-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.excel-btn{background:#e9f8ef;color:#0d8a52;border:1px solid #cfeedd}
.large-btn{min-height:42px;padding:0 16px}
.full{width:100%}

.empty-state,.loading,.concept-empty{padding:22px;text-align:center;color:#6d819c;font-size:.96rem}
.help-list{display:grid;gap:12px;padding:14px}.help-list>div{padding:10px 0;border-bottom:1px solid #edf2f7}.help-list>div:last-child{border-bottom:0}.help-list b{display:block;font-size:.95rem}.help-list span{display:block;font-size:.85rem;color:#7f90a6;margin-top:4px}

.manager-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.action-tile{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px;text-align:right;cursor:pointer;transition:.18s}
.action-tile:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(31,68,116,.08)}
.action-tile b{display:block;font-size:1rem;color:#17345d}.action-tile span{display:block;margin-top:6px;font-size:.86rem;color:#7488a1}

.alerts-list{display:grid;gap:10px}.alert-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 14px;box-shadow:var(--shadow)}
.alert-item span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#fff6e5;color:#d48417;font-weight:800}.alert-item.high span{background:#fff0f2;color:#d84959}.alert-item b{display:block;font-size:.96rem}.alert-item small{display:block;font-size:.82rem;color:#7f90a6}

.sync-layout,.detail-grid,.dashboard-matrix,.portal-grid,.result-grid,.blockers-grid{display:grid;gap:12px}
.sync-layout{grid-template-columns:1.35fr .8fr}.detail-grid,.portal-grid{grid-template-columns:repeat(2,1fr)}.result-grid{grid-template-columns:repeat(3,1fr)}.blockers-grid{grid-template-columns:repeat(4,1fr)}
.sync-hero,.live-hero,.zk-map-hero,.page-hero,.attendance-hero{background:linear-gradient(135deg,#184e96,#2f7ee4);color:#fff;border-radius:16px;padding:18px;box-shadow:0 18px 42px rgba(30,76,138,.14)}
.sync-hero b,.live-hero b,.zk-map-hero b,.page-hero b,.attendance-hero b{font-size:1.25rem}
.sync-hero span,.live-hero span,.zk-map-hero span,.page-hero span,.attendance-hero span{font-size:.9rem;color:#dce8fa}

.device-card,.module-card,.report-card,.period-status-card,.blocker-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.module-head,.device-head{padding:12px 14px;border-bottom:1px solid #edf1f6;font-weight:800;font-size:.98rem}
.module-body{padding:14px}
.metric-row,.legend-row,.quick-list{display:grid;gap:8px}
.progress-card{background:#f8fbff;border:1px solid #e8eef6;border-radius:12px;padding:10px 12px;margin-bottom:8px}.progress-card:last-child{margin-bottom:0}
.progress-card b{display:block;font-size:.92rem}.progress-card small{font-size:.8rem;color:#7c8ca1}
.medical-balance{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.medical-balance > div{padding:12px 10px;border-radius:12px;text-align:center}.medical-balance .total{background:#ecf5ff}.medical-balance .used{background:#fff0f2}.medical-balance .remain{background:#eaf8ef}.medical-balance small{display:block;font-size:.82rem;color:#6e819d}.medical-balance b{display:block;font-size:1.2rem;font-weight:800;margin-top:4px}

.check-row,.check-inline{display:flex;align-items:center;gap:8px;font-size:.92rem}
.modal-card h3{font-size:1.3rem;margin:0 0 12px}.modal-card label{font-size:.87rem;font-weight:700;color:#58708f}
.modal-error{color:#c94453;font-size:.88rem;margin-top:6px}

.login-form label{font-size:.9rem;font-weight:700}.login-form p,.login-copy p{font-size:1rem}.login-copy>span{font-size:.82rem}.login-form h2{font-size:2rem}.login-copy h1{font-size:2.5rem}

@media(max-width:1380px){
  .grid.g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .manager-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  html{font-size:14px}
}
@media(max-width:900px){
  .grid.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sync-layout,.detail-grid,.portal-grid,.result-grid,.blockers-grid,.manager-actions{grid-template-columns:1fr}
  .medical-balance{grid-template-columns:1fr}
  .hero-main h1{font-size:1.7rem}.hero-main h1 strong{font-size:1.85rem}
}
@media(max-width:760px){
  html{font-size:13px}
  .page-title h2{font-size:1.25rem}
  .kpi{min-width:190px;min-height:94px}
  .kpi span{font-size:.9rem}.kpi b{font-size:1.6rem}
  .manager-actions{grid-template-columns:1fr}
  .panel-head,.card-head{padding:0 12px}
  th,td{padding:10px 8px}
}

/* ==============================================================
   Noah HR v3.2 — Exact Reference UI
   Final shell + dashboard geometry based on approved reference.
   ============================================================== */
:root{--sidebar-w:260px;--topbar-h:72px;--ref-blue:#1977ef;--ref-navy:#0a2448}
html{font-size:15px}
body{background:#f4f8fd;color:#112f59;overflow-x:hidden}
.ui-svg{width:1em;height:1em;display:block;flex:0 0 auto}

/* exact sidebar */
.sidebar{width:var(--sidebar-w);background:linear-gradient(180deg,#0c2a52 0%,#071f40 100%);box-shadow:none;border-left:1px solid rgba(255,255,255,.06)}
.main-shell{margin-right:var(--sidebar-w);min-height:100vh;width:calc(100% - var(--sidebar-w))}
.brand{height:76px;padding:0 18px;gap:12px}.brand-logo{width:46px;height:46px}.brand b{font-size:1.45rem;font-weight:800}.brand small{font-size:.82rem;color:#91a8c9}
.sidebar nav{padding:8px 10px 28px}.sidebar h6{font-size:.75rem;color:#6f88ac;margin:15px 12px 5px}.sidebar nav button{min-height:39px;padding:8px 12px;margin:1px 0;gap:11px;border-radius:8px}.sidebar nav button i{width:20px;height:20px;display:grid;place-items:center;color:#e9f2ff}.sidebar nav button i .ui-svg{width:18px;height:18px}.sidebar nav button b{font-size:.98rem;font-weight:700}.sidebar nav button.active{background:#1478f3;box-shadow:0 6px 18px rgba(21,113,235,.25)}.nav-live{color:#ff4c64!important}

/* exact topbar */
.topbar{height:var(--topbar-h);background:#fff;border-bottom:1px solid #e4ebf4;display:grid;grid-template-columns:305px minmax(420px,1fr) 245px;align-items:center;gap:20px;padding:0 18px;direction:ltr;position:sticky;top:0;z-index:45;box-shadow:0 1px 8px rgba(25,62,106,.025)}
.top-left-zone{display:flex;align-items:center;gap:10px;direction:ltr}.profile-chip{display:flex;align-items:center;gap:10px;min-width:175px;direction:ltr}.profile-chip img{width:42px;height:42px;border-radius:12px;object-fit:cover;box-shadow:0 2px 8px rgba(24,61,106,.13)}.profile-chip>div{text-align:left;line-height:1.2}.profile-chip b{display:block;font-size:.95rem;color:#16355d}.profile-chip small{font-size:.78rem;color:#7f91aa}.profile-chip>.ui-svg{width:15px;height:15px;color:#385a84;margin-left:2px}.top-icon{width:36px;height:36px;border:0;background:transparent;color:#244a78;border-radius:9px;display:grid;place-items:center;position:relative}.top-icon:hover{background:#f2f6fc}.top-icon .ui-svg{width:20px;height:20px}.top-icon.notify em{position:absolute;right:-2px;top:-3px;width:17px;height:17px;border-radius:50%;background:#f04458;color:#fff;font-size:.68rem;font-style:normal;display:grid;place-items:center;border:2px solid #fff}
.top-search{height:42px;border:1px solid #d9e4f1;background:#fbfdff;border-radius:10px;display:flex;align-items:center;gap:10px;padding:0 12px;direction:rtl;max-width:690px;width:100%;justify-self:center;box-shadow:inset 0 0 0 1px rgba(230,237,246,.45)}.top-search>.ui-svg{width:19px;height:19px;color:#2c5687}.top-search input{border:0;outline:0;background:transparent;min-width:0;flex:1;font-size:.93rem;color:#687b94;text-align:right}.top-search kbd{direction:ltr;font-size:.72rem;color:#647c9a;background:#fff;border:1px solid #d8e3ef;border-radius:7px;padding:4px 8px;box-shadow:none}
.top-date{direction:rtl;display:flex;justify-content:flex-start;align-items:center;gap:12px;text-align:right}.top-date b{display:block;font-size:.9rem}.top-date small{display:block;font-size:.78rem;color:#7f91a8;margin-top:3px}.weather{display:flex;align-items:center;gap:5px}.weather span{font-size:1.45rem}.weather strong{font-size:1.1rem}.menu-btn{display:none}
.page-context{padding:13px 18px 0}.page-context h2{margin:0;font-size:1.45rem}.page-context small{font-size:.84rem;color:#8090a6}.is-dashboard .page-context{display:none}
.content{max-width:none;width:100%;padding:10px 16px 28px;margin:0}

/* exact dashboard geometry */
.dash.exact-reference{display:grid;gap:10px}
.ref-hero{height:120px;border-radius:12px;border:1px solid #dbe8f4;display:grid;grid-template-columns:36% 1fr;background:linear-gradient(90deg,#d8efff 0%,#eaf6ff 47%,#f8fcff 100%);overflow:hidden;box-shadow:0 3px 14px rgba(25,62,106,.035)}
.ref-hero .hero-left{height:100%;background:url('/static/noah-hero-reference-left.png') center/cover no-repeat;grid-column:1}
.ref-hero .hero-main{grid-column:2;text-align:right;direction:rtl;padding:17px 28px 10px 18px;align-self:center}.ref-hero .hero-main h1{font-size:2.05rem;margin:0 0 5px;line-height:1.1;font-weight:800}.ref-hero .hero-main h1 strong{font-size:2.25rem}.ref-hero .hero-main p{font-size:1rem;color:#304d72;margin:0}.ref-hero .hero-main small{font-size:.83rem;color:#8293a9;margin-top:5px}
.ref-kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;direction:rtl}.ref-kpis .kpi{height:112px;min-height:112px;padding:14px 12px;border-radius:12px;grid-template-columns:48px 1fr;gap:11px;box-shadow:0 4px 16px rgba(24,61,105,.045)}.ref-kpis .kpi-ico{width:48px;height:48px;border-radius:50%;font-size:1.2rem}.ref-kpis .kpi-ico .ui-svg{width:23px;height:23px}.ref-kpis .kpi span{font-size:.87rem;font-weight:700}.ref-kpis .kpi b{font-size:1.85rem;margin:3px 0;color:#0e2e59}.ref-kpis .kpi small{font-size:.76rem;line-height:1.35;color:#8594a8}.ref-kpis .kpi small strong{font-weight:800;margin-left:4px}.ref-kpis .kpi small .up{color:#14a260}.ref-kpis .kpi small .down{color:#e94c5e}
.kpi.blue .kpi-ico{background:#e7f4ff;color:#267ee5}.kpi.cyan .kpi-ico{background:#e7f7ff;color:#2d8fce}.kpi.pink .kpi-ico{background:#ffeaf1;color:#e24e75}.kpi.orange .kpi-ico{background:#fff3da;color:#e39a1b}.kpi.purple .kpi-ico{background:#f0edff;color:#735eda}.kpi.green .kpi-ico{background:#e5f8ef;color:#12a05d}

.ref-row1{display:grid;grid-template-columns:2.05fr 1.05fr 1.08fr .92fr;gap:8px;direction:rtl}.ref-row1>.card{height:264px;min-height:264px}.ref-row2{display:grid;grid-template-columns:1.18fr 1fr 1.08fr;gap:8px;direction:rtl}.ref-row2>.card{height:181px;min-height:181px}.ref-row3{display:grid;grid-template-columns:1fr 2.45fr;gap:8px;direction:rtl}.ref-row3>.card{height:135px;min-height:135px}
.card{border-radius:12px;border-color:#e0e9f4;box-shadow:0 4px 16px rgba(25,62,106,.04)}.card-head{height:43px;min-height:43px;padding:0 12px}.card-head b{font-size:.98rem}.card-head a,.card-head span{font-size:.78rem}.card-body{padding:10px 11px}.mini-month{height:29px;border:1px solid #dce6f1;border-radius:7px;background:#fff;padding:0 8px;color:#34577f;font-size:.78rem}
.month-tiles{grid-template-columns:repeat(4,1fr);gap:7px}.month-tile{padding:9px 5px}.month-tile span{font-size:.77rem}.month-tile b{font-size:1.5rem}.month-tile small{font-size:.72rem}.ref-chart{height:124px;margin-top:4px}.attendance-trend-svg{height:100%;padding:0}
.daily-card .donut-wrap{height:219px;grid-template-columns:128px 1fr;padding:12px 12px}.daily-card .donut{width:113px;height:113px}.daily-card .donut:before{width:78px;height:78px}.daily-card .donut b{font-size:1.75rem}.daily-card .legend{gap:7px}.daily-card .legend>div{padding:7px 8px;font-size:.83rem}.daily-card .legend b{font-size:.9rem}
.ref-leave>div{height:72px;display:grid;align-content:center}.ref-leave em{left:7px;top:7px;color:#2878f0}.ref-leave em .ui-svg{width:16px;height:16px}.leave-card .progress-title{margin-top:12px}.leave-card .action,.current-card .action,.row2 .action{height:31px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:.82rem}.action .ui-svg{width:15px;height:15px}.current-card{display:flex;flex-direction:column}.current-card .shift-list{flex:1}.current-card .shift-row{grid-template-columns:28px 1fr 32px;padding:7px 9px}.shift-count{font-size:1rem;font-weight:800;color:#17345d;text-align:center}.current-card .shift-icon{width:30px;height:30px}.current-card .shift-icon .ui-svg{width:17px;height:17px}.shift-icon.pink{background:#fff0f4;color:#e65376}.shift-icon.blue{background:#eef5ff;color:#3577d3}.card-body.compact{padding:6px 10px 9px}
.payroll-card .card-body,.medical-card .card-body,.zk-card .card-body{padding:8px 10px}.pay-total{position:relative;padding:2px 0 7px}.pay-total span{font-size:.76rem}.pay-total b{font-size:1.9rem}.pay-total i{position:absolute;left:0;top:2px;width:36px;height:36px;border-radius:50%;background:#fff3db;color:#dd9217;display:grid;place-items:center}.pay-total i .ui-svg{width:18px;height:18px}.three>div{padding:8px 5px}.three span{font-size:.73rem}.three b{font-size:.95rem}.three em .ui-svg{width:15px;height:15px}.online{margin-bottom:7px}.zk-card .quick3>div{padding:8px 4px}.zk-card .action{margin-top:8px}

.ref-row3 .appointments-card{grid-column:1}.ref-row3 .activity-card{grid-column:2}.appointments{padding:3px 10px}.appointment-row{height:21px;display:grid;grid-template-columns:74px 18px 1fr 8px;align-items:center;gap:7px;border-bottom:1px solid #eef2f7}.appointment-row:last-child{border-bottom:0}.appointment-row time{font-size:.73rem;color:#68809e;direction:ltr}.appointment-row i .ui-svg{width:14px;height:14px}.appointment-row b{font-size:.76rem;font-weight:600}.appointment-dot{width:7px;height:7px;border-radius:50%}.activity-card .tabs{height:31px}.activity-card .table-head,.activity-card .table-row{grid-template-columns:24px 1.3fr 1fr .9fr .85fr .65fr .45fr;min-height:24px;padding:4px 10px}.activity-card .table-head{font-size:.69rem}.activity-card .table-row{font-size:.72rem}.activity-card .emp-cell img{width:22px;height:22px;border-radius:50%;object-fit:cover}.active-state{color:#15985c;font-weight:700}

/* all pages inherit same visual system */
.panel,.toolbar,.filters,.module-card,.device-card,.report-card,.period-status-card,.blocker-card{border-radius:12px;border-color:#e0e9f4;box-shadow:0 4px 16px rgba(25,62,106,.04)}
.toolbar,.filters{padding:11px 12px}.panel-head,.module-head,.device-head{min-height:45px}.panel-head b,.module-head b,.device-head b{font-size:.96rem}.input,.select,textarea{border-radius:8px;font-size:.91rem}.btn{border-radius:8px;font-size:.88rem}.table-wrap table,table{font-size:.9rem}th{font-size:.8rem}td{font-size:.88rem}.status{font-size:.76rem}
.manager-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.action-tile{min-height:104px;padding:14px}.action-tile b{font-size:.98rem}.action-tile span{font-size:.82rem}.grid.g5{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.grid.g5 .kpi{min-height:98px}

@media(max-width:1450px){
  :root{--sidebar-w:235px}.topbar{grid-template-columns:270px minmax(360px,1fr) 210px}.ref-kpis{grid-template-columns:repeat(4,1fr)}.ref-row1{grid-template-columns:1.65fr 1fr 1fr}.ref-row1>.current-card{grid-column:1/-1;height:auto;min-height:150px}.ref-row2{grid-template-columns:1fr 1fr}.ref-row2>.zk-card{grid-column:1/-1;height:auto}.ref-row3{grid-template-columns:1fr 1.9fr}.grid.g5{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .topbar{grid-template-columns:1fr auto;padding:0 10px}.top-search,.top-date{display:none}.menu-btn{display:grid;place-items:center;width:36px;height:36px;border:1px solid #dfe7f1;border-radius:8px;background:#fff}.top-left-zone .desktop-only{display:none}.profile-chip{min-width:0}.profile-chip>div{display:none}.sidebar{right:auto;left:0;transform:translateX(-105%);transition:.22s;z-index:80}.sidebar.open{transform:translateX(0)}.main-shell{margin-right:0;width:100%}.sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(4,18,36,.45);z-index:70}.ref-hero{grid-template-columns:1fr;height:130px}.ref-hero .hero-left{position:absolute;inset:0 45% 0 0;opacity:.8}.ref-hero .hero-main{grid-column:1;padding:20px 16px;position:relative;z-index:2}.ref-hero .hero-main h1{font-size:1.7rem}.ref-hero .hero-main h1 strong{font-size:1.85rem}.ref-kpis{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.ref-kpis .kpi{min-width:190px;height:105px;scroll-snap-align:start}.ref-row1,.ref-row2,.ref-row3{grid-template-columns:1fr}.ref-row1>.card,.ref-row2>.card,.ref-row3>.card,.ref-row1>.current-card,.ref-row2>.zk-card{grid-column:auto;height:auto;min-height:auto}.ref-row3 .appointments-card,.ref-row3 .activity-card{grid-column:auto}.manager-actions,.grid.g5{grid-template-columns:1fr 1fr}.page-context{padding:10px 10px 0}.content{padding:8px 9px 74px}.mobile-nav{display:grid}.activity-card .table-head{display:none}.activity-card .table-row{grid-template-columns:24px 1fr auto}.activity-card .table-row>span:nth-child(3),.activity-card .table-row>span:nth-child(4),.activity-card .table-row>span:nth-child(5),.activity-card .table-row>span:nth-child(7){display:none}
}
@media(max-width:560px){.manager-actions,.grid.g5{grid-template-columns:1fr}.top-left-zone{gap:5px}.profile-chip img{width:36px;height:36px}.top-icon{width:32px;height:32px}.ref-hero .hero-left{inset:0 35% 0 0}.month-tiles{grid-template-columns:1fr 1fr}}
.ref-hero{background-image:url('/static/noah-hero-bg.png');background-size:cover;background-position:left center;background-repeat:no-repeat;grid-template-columns:36% 1fr}
.ref-hero .hero-left{background:none}
.ref-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.02) 38%,rgba(245,251,255,.22) 62%,rgba(247,252,255,.72) 100%);pointer-events:none}
.ref-hero .hero-main{position:relative;z-index:2}


/* ================================================================
   Noah HR v3.3 — Internal pages review
   Based on installed-screen review: monthly attendance, month close,
   range recalculation, raw punches, manager center, ZK mapping/sync.
   ================================================================ */

/* clearer global typography on working screens */
.page-context{padding:18px 18px 10px}
.page-context h2{font-size:1.62rem;line-height:1.2;font-weight:800;color:#102e57}
.page-context small{font-size:.9rem;color:#71849f;margin-top:4px;display:block}
.content{padding-top:8px}

.panel,.toolbar,.filters,.period-status-card,.blocker-card,.action-tile{background:#fff;border:1px solid #dfe8f4;box-shadow:0 5px 18px rgba(26,62,106,.045)}
.toolbar,.filters{min-height:58px}
.toolbar b{font-size:1rem}.toolbar .muted{font-size:.84rem}
.filters label,.form-grid label{display:block;font-size:.82rem;font-weight:700;color:#627792;margin-bottom:5px}
.input,.select{min-height:40px;padding:8px 11px;background:#fbfdff;font-size:.92rem}
.btn{min-height:36px;padding:8px 13px;font-size:.88rem;font-weight:700}

/* generic KPIs used by manager/live/exceptions */
.kpi{min-height:104px;padding:14px 15px;grid-template-columns:48px 1fr;align-items:center;gap:12px}
.kpi-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#eef5ff;color:#3175d7;font-size:1.25rem}
.kpi-copy span{font-size:.88rem;font-weight:700;color:#6b7e98}.kpi-copy b{display:block;font-size:1.9rem;line-height:1.1;color:#102e57;margin-top:5px}
.kpi.good .kpi-icon{background:#e8f8ef;color:#16955c}.kpi.warn .kpi-icon{background:#fff5e2;color:#df941c}.kpi.bad .kpi-icon{background:#fff0f2;color:#d94b5d}.kpi.blue .kpi-icon{background:#eaf5ff;color:#2a7bd7}

/* monthly attendance */
.attendance-month-page{display:grid;gap:10px}
.attendance-month-toolbar{margin:0;display:flex;justify-content:space-between;align-items:center}
.attendance-tabs{display:flex;gap:6px}.attendance-tabs .btn{min-width:72px}
.attendance-month-filters{display:grid;grid-template-columns:120px 120px minmax(180px,1fr) minmax(220px,1.25fr) 90px;gap:10px;align-items:end;margin:0}
.month-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:10px}
.month-summary>div{min-height:92px;border:1px solid #e1eaf4;border-radius:13px;background:#fff;padding:13px 14px;box-shadow:0 4px 15px rgba(27,64,108,.04)}
.month-summary span{display:block;font-size:.84rem;color:#6e819b;font-weight:700}.month-summary b{display:block;font-size:1.75rem;color:#102e57;margin-top:6px}.month-summary small{font-size:.76rem;color:#8c9aac}.month-summary .good{background:#effaf4}.month-summary .bad{background:#fff3f4}.month-summary .warn{background:#fff8ec}.month-summary .blue{background:#f0f6ff}
.monthly-table-panel{overflow:hidden}.monthly-table-panel .table-wrap{max-height:560px;overflow:auto}.monthly-table-panel table{min-width:1450px}

/* period close */
.attendance-period-page{display:grid;gap:10px}
.period-filters{display:grid;grid-template-columns:120px 120px minmax(220px,1fr) 110px;gap:10px;align-items:end;margin:0}
.period-status-card{min-height:96px;padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.period-status-card>div:first-child{display:grid;grid-template-columns:auto auto auto;align-items:center;gap:12px}.period-status-card span{font-size:.86rem;color:#71849d}.period-status-card b{font-size:1.25rem;color:#143b6d}.period-status-card small{font-size:.82rem;color:#8797aa}
.blockers-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.blocker-card{min-height:100px;padding:14px;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:10px}
.blocker-card>span{width:42px;height:42px;border-radius:12px;background:#f1f5fb;display:grid;place-items:center;font-size:1.15rem;color:#56749a}.blocker-card b{font-size:1.55rem;display:block;color:#17345d}.blocker-card small{font-size:.79rem;color:#71839c}.blocker-card.has>span{background:#fff3e8;color:#e28c19}.blocker-card.ok>span{background:#eaf8ef;color:#168f58}
.warning-note,.success-note{border-radius:13px;padding:13px 15px;font-size:.9rem;display:flex;align-items:center;justify-content:space-between;gap:12px}

/* recalculation */
.recalc-page{display:grid;gap:10px}.recalc-hero{min-height:128px;padding:20px 22px}.recalc-hero h3{font-size:1.35rem;margin:7px 0 4px}.recalc-hero p{font-size:.9rem}.form-panel{padding:16px}.form-panel .form-grid{gap:12px}.form-panel .info-note{margin:13px 0}.form-panel .large-btn{min-width:190px}

/* raw punches */
.raw-page{display:grid;gap:10px}.raw-tabs{padding:0;gap:6px}.tab-btn{min-height:36px;border:1px solid #dbe6f2;border-radius:9px;background:#fff;color:#4b6686;padding:7px 13px;font-size:.86rem;font-weight:700}.tab-btn.active{background:#2878f0;color:#fff;border-color:#2878f0}.raw-filters{display:grid;grid-template-columns:minmax(200px,1fr) minmax(220px,1.1fr) 160px 160px 90px;gap:10px;align-items:end;margin:0}.raw-table-panel{overflow:hidden}.raw-table-panel .table-wrap{max-height:620px;overflow:auto}.raw-table-panel table{min-width:850px}

/* manager */
.manager-page{display:grid;gap:14px}.manager-kpis{margin:0}.section-caption{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid #e5edf6;padding:3px 2px 9px}.section-caption b{font-size:1.05rem}.section-caption span{font-size:.82rem;color:#7c8da4}.manager-actions{margin-top:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.action-tile{min-height:118px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;overflow:hidden}.action-tile:after{content:'›';position:absolute;left:14px;bottom:12px;color:#7ba3d9;font-size:1.3rem}.action-tile b{font-size:1.03rem}.action-tile span{font-size:.84rem;line-height:1.5}

/* ZK mapping + sync */
.zk-map-hero,.sync-hero{border-radius:15px;min-height:150px;padding:20px 22px;background:linear-gradient(135deg,#164f99,#2f7fe4);box-shadow:0 14px 34px rgba(27,82,153,.13)}
.zk-map-hero h3,.sync-hero h3{font-size:1.25rem;margin:7px 0 6px}.zk-map-hero p,.sync-hero p{font-size:.9rem}.zk-map-hero .select,.sync-hero .select{background:#fff;color:#244a78}
.zk-summary{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.zk-count{font-size:1.8rem;font-weight:800}.zk-device-box{margin-top:13px;display:grid;grid-template-columns:auto minmax(280px,1fr) auto;align-items:center;gap:8px}.zk-device-box label{font-size:.82rem}.zk-device-box small{color:#c9dcf5!important}
.sync-layout{grid-template-columns:1.45fr .75fr;gap:10px}.sync-control,.sync-help{min-height:318px}.sync-control .form-grid{padding:14px;gap:12px}.sync-control>.info-note{margin:0 14px 12px}.sync-control>.large-btn{margin:0 14px 14px}.sync-help .help-list{padding:8px 14px}.sync-help .help-list>div{padding:10px 0}

/* tables */
table{line-height:1.45}thead th{font-weight:800;color:#5f7593}tbody td{color:#183961}tbody tr:hover{background:#fbfdff}.table-wrap{scrollbar-width:thin}

@media(max-width:1200px){
  .attendance-month-filters,.raw-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.attendance-month-filters>.btn,.raw-filters>.btn{grid-column:1/-1}
  .period-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.period-filters>.btn{grid-column:1/-1}
  .blockers-grid{grid-template-columns:repeat(3,1fr)}.manager-actions{grid-template-columns:repeat(2,1fr)}.sync-layout{grid-template-columns:1fr}
}
@media(max-width:760px){
  .attendance-month-filters,.raw-filters,.period-filters{grid-template-columns:1fr}.month-summary{grid-template-columns:1fr 1fr}.blockers-grid,.manager-actions{grid-template-columns:1fr}.period-status-card{align-items:flex-start;flex-direction:column}.period-status-card>div:first-child{grid-template-columns:1fr}.warning-note,.success-note{align-items:flex-start;flex-direction:column}.zk-device-box{grid-template-columns:1fr}.manager-page .g5{grid-template-columns:1fr 1fr}
}