@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--blue:#0757b9;--blue2:#123b86;--cyan:#09a9ef;--orange:#ff7b00;--navy:#0d1c3c;--ink:#17233e;--muted:#728097;--bg:#f4f7fb;--line:#e4eaf2;--green:#138a58;--red:#c83a2f;--white:#fff}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--ink)}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}
.app-shell{min-height:100vh;display:flex}.sidebar{position:fixed;inset:0 auto 0 0;width:270px;height:100vh;background:linear-gradient(180deg,#071a3b,#0e2755);color:#dce7fa;padding:22px 16px;display:flex;flex-direction:column;z-index:50;box-shadow:8px 0 30px #09244d12;overflow:hidden}.sidebar-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 3px 12px 0;scrollbar-width:thin;scrollbar-color:#5e78a5 transparent}.sidebar-nav::-webkit-scrollbar{width:6px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar-nav::-webkit-scrollbar-thumb{background:#5e78a5;border-radius:20px}.sidebar-toggle{position:absolute;right:-13px;top:44px;width:40px;height:40px;border-radius:50%;border:1px solid #dce7f7;background:#fff;color:#0757b9;font-size:25px;line-height:1;z-index:60;cursor:pointer;box-shadow:0 8px 20px #09244d18}.sidebar-toggle:hover{transform:scale(1.04)}.sidebar-logo{display:flex;align-items:center;gap:10px;padding:5px 10px 24px;border-bottom:1px solid #ffffff13}.sidebar-logo img{width:47px;height:47px;object-fit:contain;background:#fff;border-radius:12px;padding:3px}.sidebar-logo span{display:block;font-size:18px;font-weight:800;letter-spacing:1.6px;color:#fff}.sidebar-logo small{font-size:8px;letter-spacing:2px;color:#9db1d3}.workspace-label,.nav-label{font-size:9px;letter-spacing:1.5px;font-weight:800;color:#7189b3;padding:18px 12px 7px}.sidebar nav{display:grid;gap:4px}.sidebar nav a,.sidebar-bottom>a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:#b8c7e0;font-size:12px;font-weight:600}.sidebar nav a:hover,.sidebar-bottom>a:hover{background:#ffffff10;color:#fff}.nav-label{padding-top:16px}.sidebar-bottom{margin-top:auto}.mini-company{display:flex;gap:8px;align-items:center;border-top:1px solid #ffffff13;padding:15px 8px}.mini-company>span{width:31px;height:31px;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--orange));display:grid;place-items:center;color:#fff;font-size:10px;font-weight:800}.mini-company b{font-size:10px;display:block;color:#fff}.mini-company small{font-size:8px;color:#8296b9}
.content{margin-left:270px;width:calc(100% - 270px);padding:0 34px 45px;transition:margin-left .22s ease,width .22s ease}.sidebar.collapsed{width:82px;padding-left:10px;padding-right:10px}.sidebar.collapsed .sidebar-logo>div,.sidebar.collapsed .workspace-label,.sidebar.collapsed .nav-label,.sidebar.collapsed nav a span,.sidebar.collapsed .sidebar-bottom span,.sidebar.collapsed .mini-company div{display:none}.sidebar.collapsed .sidebar-logo{justify-content:center;padding-left:0;padding-right:0}.sidebar.collapsed nav a,.sidebar.collapsed .sidebar-bottom>a{justify-content:center;padding-left:10px;padding-right:10px}.sidebar.collapsed .sidebar-toggle{right:-13px}.sidebar.collapsed .sidebar-toggle{transform:rotate(180deg)}.content.sidebar-collapsed{margin-left:82px;width:calc(100% - 82px)}.sidebar-overlay{display:none}.topbar{height:100px;display:flex;align-items:center;justify-content:space-between}.page-heading h2{margin:4px 0 0;font-size:21px}.eyebrow{font-size:9px;letter-spacing:1.7px;font-weight:800;color:#8795aa}.blue{color:var(--blue)}.top-actions{display:flex;align-items:center;gap:18px}.notification{font-size:21px;color:#7890b0}.user-menu{display:flex;align-items:center;gap:10px}.user-menu b{display:block;font-size:12px}.user-menu small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.avatar{width:38px;height:38px;border-radius:11px;background:#eaf1ff;color:var(--blue);display:grid;place-items:center;font-weight:800}.avatar.sm{width:30px;height:30px;border-radius:9px;font-size:10px}.mobile-title{display:none}
.hero-dashboard{min-height:220px;border-radius:20px;padding:35px 40px;background:linear-gradient(120deg,#fff,#eef6ff);border:1px solid #dce8f7;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative}.hero-dashboard:after{content:"";position:absolute;right:-90px;bottom:-130px;width:420px;height:260px;border-radius:50%;background:linear-gradient(135deg,#0757b9,#10a9ed);opacity:.12}.hero-dashboard h1{font-size:34px;line-height:1.1;margin:12px 0}.hero-dashboard h1 span,.payroll-banner h1 span{color:var(--orange)}.hero-dashboard p{margin:0;color:#65738b;max-width:560px;font-size:13px}.hero-logo-circle{width:145px;height:145px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 15px 50px #0757b91a;z-index:1}.hero-logo-circle img{width:115px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:20px 0}.metric{background:#fff;border:1px solid var(--line);border-radius:15px;padding:19px;position:relative;overflow:hidden}.metric span{font-size:8px;letter-spacing:1.4px;color:#8490a4;font-weight:800}.metric strong{display:block;font-size:27px;margin:10px 0 4px}.metric small{font-size:10px;color:var(--muted)}.metric i{position:absolute;right:18px;top:18px;font-style:normal;color:#dce8ff;font-size:25px}
.content-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin:18px 0}.panel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:22px;box-shadow:0 5px 20px #0d1c3c05}.panel h3{margin:0 0 5px;font-size:15px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.panel-head p,.panel>p{margin:0;color:var(--muted);font-size:11px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-grid a{border:1px solid var(--line);padding:16px;border-radius:11px;display:grid;grid-template-columns:32px 1fr;column-gap:8px}.quick-grid b{grid-row:span 2;color:var(--blue);font-size:20px}.quick-grid span{font-size:12px;font-weight:700}.quick-grid small{font-size:10px;color:var(--muted);margin-top:3px}.security-row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:11px}.security-row span{color:var(--muted)}.security-row b{font-size:11px}
label{display:block;font-size:10px;color:#5f6d83;font-weight:700;margin:13px 0 6px}input,select,textarea{width:100%;border:1px solid #d9e1ec;background:#fff;border-radius:9px;padding:11px 12px;font-size:12px;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:#7fa7e8;box-shadow:0 0 0 3px #0757b910}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px 15px}.gradient-btn{border:0;color:#fff;background:linear-gradient(90deg,#0757b9 0%,#087ed2 52%,#ff7b00 100%);border-radius:9px;padding:12px 17px;font-size:11px;font-weight:800;cursor:pointer;margin-top:15px;box-shadow:0 8px 18px #0757b91c}.gradient-btn span{margin-left:20px}.alert{padding:12px 15px;border-radius:9px;margin-bottom:15px;font-size:12px}.alert.success{background:#eaf8f1;color:#11764c}.alert.danger{background:#fdeceb;color:#a52d25}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px}th{text-align:left;color:#8792a5;font-size:8px;letter-spacing:1px;padding:12px;border-bottom:1px solid var(--line)}td{padding:13px 12px;border-bottom:1px solid #edf0f4;white-space:nowrap}td small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.tag{display:inline-block;padding:5px 8px;border-radius:20px;background:#edf1f7;font-size:9px;font-weight:800}.tag.success{background:#e8f7f0;color:var(--green)}.tag.pending{background:#fff4d9;color:#8c6711}.tag.rejected,.tag.danger{background:#fdeceb;color:var(--red)}.tag.finalised{background:#e8f7f0;color:var(--green)}.tag.draft{background:#edf1f7}.mini{border:1px solid var(--line);background:#fff;padding:6px 9px;border-radius:7px;font-size:9px;font-weight:800;cursor:pointer}.mini.success{color:var(--green)}.mini.danger{color:var(--red)}.inline{display:inline-flex;gap:5px}.search{max-width:230px}.person-cell{display:flex;align-items:center;gap:9px}.security-badge{font-size:8px;font-weight:800;color:var(--green);background:#e8f7f0;padding:7px 10px;border-radius:20px}.auto-login-note{margin-top:18px;padding:13px;border-radius:10px;background:linear-gradient(90deg,#f1f7ff,#fff6ed);border:1px solid #e1eaf7;font-size:10px;color:#59687f}.auto-login-note b{display:block;color:var(--blue);margin-bottom:4px}.auto-login-note strong{color:var(--orange)}.workflow{display:grid;gap:12px;margin-top:20px}.workflow>div{display:grid;grid-template-columns:32px 1fr;column-gap:10px}.workflow b{grid-row:span 2;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#eaf2ff;color:var(--blue);font-size:9px}.workflow span{font-size:11px;font-weight:800}.workflow small{font-size:9px;color:var(--muted)}.punch-panel{min-height:240px}.attendance-hero{background:linear-gradient(120deg,#0a2b62,#0757b9);color:#fff;border-radius:17px;padding:30px 35px;display:flex;justify-content:space-between;align-items:center}.blue-pill{background:#ffffff17;color:#dce9ff}.attendance-hero h1{font-size:27px;margin:10px 0 6px}.attendance-hero p{font-size:12px;color:#c8d8f3}.live-clock{font-size:30px;font-weight:800}.punch-status{display:flex;gap:12px;align-items:center;margin:25px 0}.status-dot{width:14px;height:14px;border-radius:50%;background:#b8c2d0}.status-dot.active{background:#12a86c;box-shadow:0 0 0 7px #12a86c18}.status-dot.done{background:var(--blue)}.punch-status b{font-size:13px;display:block}.punch-status small{font-size:10px;color:var(--muted)}.completed-banner{margin-top:15px;background:#eaf8f1;color:var(--green);padding:12px;border-radius:9px;font-size:11px;font-weight:700}.info-list{margin-top:15px}.info-list div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:11px}.info-list span{color:var(--muted)}
.payroll-banner{background:linear-gradient(120deg,#f6fbff,#fff6ed);border:1px solid #e2eaf5;border-radius:17px;padding:28px 35px;display:flex;align-items:center;justify-content:space-between}.payroll-banner h1{font-size:28px;margin:10px 0}.payroll-banner p{font-size:12px;color:var(--muted)}.pay-icon{font-size:70px;color:#0757b9;font-weight:800;opacity:.12}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.member-list{margin-top:15px}.member-list div{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:11px}.member-list small{margin-left:auto;color:var(--muted)}.barrow{display:grid;grid-template-columns:150px 1fr 40px;gap:12px;align-items:center;margin:17px 0;font-size:11px}.bar{height:8px;background:#edf1f7;border-radius:20px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:20px}.settings-header{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:17px;padding:25px 30px;margin-bottom:18px}.settings-header h1{margin:7px 0;font-size:25px}.settings-header p{margin:0;color:var(--muted);font-size:11px}.settings-header img{width:180px}.settings-logo-card{margin-top:25px;padding:16px;background:#f7f9fc;border:1px solid var(--line);border-radius:10px;display:flex;gap:15px;align-items:center}.settings-logo-card img{width:90px}.settings-logo-card p{font-size:10px;color:var(--muted)}.empty{text-align:center;padding:30px;color:var(--muted)}
.login-page{min-height:100vh;background:#f5f8fc}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.65fr 1fr}.login-brand-panel{position:relative;overflow:hidden;background:linear-gradient(135deg,#f7fbff 0%,#eaf5ff 60%,#fff7ed 100%);padding:24px 55px;display:flex;flex-direction:column}.login-brand-panel:after{content:"";position:absolute;width:600px;height:600px;right:-300px;bottom:-340px;border-radius:50%;border:80px solid #0757b915}.login-nav{display:flex;align-items:center;justify-content:space-between;color:#4b6185;font-size:10px}.login-logo{width:175px}.brand-copy{margin-top:80px;max-width:570px;z-index:1}.brand-copy h1{font-size:52px;line-height:.94;margin:10px 0 17px;letter-spacing:-2px;color:#0c2e6c}.brand-copy h1 span{color:var(--orange)}.brand-copy h3{font-size:16px;margin:0 0 10px;color:#122c5d}.brand-copy p{font-size:12px;color:#687992;line-height:1.7;max-width:500px}.feature-grid{display:grid;grid-template-columns:repeat(4,130px);gap:18px;margin-top:42px;z-index:1}.feature-grid div{display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center;font-size:10px;color:#304a76}.feature-grid b{width:46px;height:46px;background:#fff;border:1px solid #dce9f8;border-radius:12px;display:grid;place-items:center;color:var(--blue);font-size:20px;box-shadow:0 8px 20px #0757b910}.brand-bottom{margin-top:auto;display:flex;align-items:center;gap:20px;color:#173b7c;z-index:1}.brand-bottom strong{font-size:13px;letter-spacing:1.5px}.brand-bottom span{font-size:9px;color:#7487a1}.brand-bottom small{margin-left:auto;font-size:9px;color:#7d8ba1}.login-card-wrap{padding:25px 38px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fff}.login-toplinks{width:min(460px,100%);text-align:right;color:#7586a0;font-size:9px;margin-bottom:12px}.login-card{width:min(460px,100%);background:#fff;border:1px solid #e2e9f2;border-radius:20px;padding:34px;box-shadow:0 25px 80px #15396d14}.card-logo{width:205px;display:block;margin:0 auto 17px}.login-card h2{text-align:center;color:#0d2c65;font-size:21px;margin:0}.login-card>p{text-align:center;margin:7px 0 22px}.input-icon{position:relative}.input-icon span{position:absolute;left:12px;top:10px;font-size:13px;color:var(--blue)}.input-icon input{padding-left:38px}.login-options{display:flex;justify-content:space-between;align-items:center;margin-top:11px;font-size:9px}.login-options a{color:var(--blue);font-weight:700}.check{margin:0;display:flex;align-items:center;gap:4px;font-weight:500}.check input{width:auto}.secure-strip{margin-top:18px;background:#edf7ff;color:#0757b9;text-align:center;padding:10px;border-radius:8px;font-size:9px;font-weight:700}.login-footer-note{text-align:center;margin-top:18px;font-size:10px;color:#687891;line-height:1.8}.login-footer-note b{color:var(--blue)}.login-footer-note small{color:#9aa5b5}.simple-login{display:grid;place-items:center}.password-card{width:min(470px,92vw)}.password-card .card-logo{margin-bottom:20px}.setup-card{width:min(620px,92vw);background:#fff;border-radius:20px;padding:45px;text-align:center;box-shadow:0 25px 80px #10204018}.setup-logo{width:230px;margin-bottom:20px}.setup-card h1{font-size:20px}.setup-card p{font-size:12px;color:var(--muted);line-height:1.7}.btn{display:inline-block;border:0;color:#fff;background:linear-gradient(90deg,#0757b9,#087ed2,#ff7b00);padding:12px 20px;border-radius:9px;font-size:11px;font-weight:800}.center{min-height:100vh;display:grid;place-items:center}
@media(max-width:1050px){.login-shell{grid-template-columns:1fr}.login-brand-panel{min-height:560px}.login-card-wrap{padding:40px}.kpi-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}}
@media(max-width:750px){.sidebar{transform:translateX(-100%);transition:.22s;width:270px}.sidebar.open{transform:translateX(0)}.sidebar-toggle{display:none}.sidebar-overlay{position:fixed;inset:0;background:#071a3b66;z-index:40;display:none}.sidebar.open + .sidebar-overlay{display:block}.content{margin-left:0;width:100%;padding:0 14px 30px}.mobile-title{display:flex;align-items:center;gap:10px}.mobile-title img{width:110px}.mobile-menu{border:0;background:transparent;font-size:20px;color:var(--navy)}.page-heading{display:none}.topbar{height:75px}.top-actions{margin-left:auto}.user-menu>div:last-child{display:none}.hero-dashboard{padding:25px}.hero-dashboard h1{font-size:27px}.hero-logo-circle{width:90px;height:90px}.hero-logo-circle img{width:70px}.kpi-grid{grid-template-columns:1fr 1fr;gap:9px}.metric{padding:14px}.metric strong{font-size:21px}.cards{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.search{max-width:150px}.settings-header{padding:20px}.settings-header img{width:120px}.login-brand-panel{padding:20px 24px;min-height:500px}.login-nav div{display:none}.brand-copy{margin-top:45px}.brand-copy h1{font-size:40px}.feature-grid{grid-template-columns:repeat(2,120px);margin-top:28px}.brand-bottom{margin-top:35px;flex-wrap:wrap}.brand-bottom small{margin-left:0}.login-card-wrap{padding:28px 16px}.login-card{padding:27px}.login-toplinks{display:none}.attendance-hero{padding:25px;display:block}.live-clock{margin-top:18px}.quick-grid{grid-template-columns:1fr}.payroll-banner{padding:25px}.payroll-banner h1{font-size:24px}}

.top-logout{display:flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid #dce5f0;border-radius:9px;background:#fff;color:#c23a30;font-size:10px;font-weight:800;transition:.2s}.top-logout:hover{background:#fff3f2;border-color:#f0c9c5;transform:translateY(-1px)}.sidebar-bottom>a{margin:2px 0 4px;background:#ffffff0b;border:1px solid #ffffff10;color:#fff}.sidebar-bottom>a span{font-weight:800}.sidebar-bottom>a:hover{background:linear-gradient(90deg,#0757b9,#ff7b00);border-color:transparent}.logout-mobile{display:none}@media(max-width:750px){.top-logout{padding:9px 10px}.top-logout span{display:none}.top-logout{font-size:17px;width:38px;height:38px;justify-content:center}.sidebar-bottom>a{padding:12px}.sidebar-bottom{padding-bottom:8px}}

.shift-badge{font-size:9px;font-weight:800;letter-spacing:1.3px;color:#0757b9;background:#edf6ff;border:1px solid #d7e9fb;padding:10px 13px;border-radius:20px}.inline-edit{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px;min-width:520px}.inline-edit input{padding:7px;font-size:10px}.inline-edit .check{display:flex;align-items:center;gap:5px;margin:0}.inline-edit .check input{width:auto}.details{position:relative}
.approval-hero{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(110deg,#f3f8ff,#fff7ee);border:1px solid #dce8f7;margin-bottom:18px}.approval-hero h3{margin:7px 0}.approval-hero p{max-width:760px;color:var(--muted);font-size:11px}.approval-count{min-width:105px;height:105px;border-radius:22px;background:linear-gradient(135deg,#0757b9,#ff7b00);color:#fff;display:grid;place-items:center;align-content:center;box-shadow:0 12px 28px #0757b926}.approval-count b{font-size:32px;line-height:1}.approval-count span{font-size:10px;margin-top:5px;font-weight:800;text-transform:uppercase;letter-spacing:1px}.approval-badge{background:#fff4d9;color:#8c6711;padding:8px 12px;border-radius:20px;font-size:9px;font-weight:800}.mini.success,.mini.danger{min-width:72px}.mini.success{background:#eaf8f1;border-color:#cbe9da}.mini.danger{background:#fdeceb;border-color:#f3cfc9}@media(max-width:700px){.approval-hero{display:block}.approval-count{margin-top:15px}.inline{flex-wrap:wrap}}

@media(max-width:750px){.sidebar.collapsed{width:270px;padding:22px 16px}.sidebar.collapsed .sidebar-logo>div,.sidebar.collapsed .workspace-label,.sidebar.collapsed .nav-label,.sidebar.collapsed nav a span,.sidebar.collapsed .sidebar-bottom span,.sidebar.collapsed .mini-company div{display:block}.sidebar.collapsed nav a,.sidebar.collapsed .sidebar-bottom>a{justify-content:flex-start;padding-left:12px;padding-right:12px}.content.sidebar-collapsed{margin-left:0;width:100%}.sidebar-nav{padding-bottom:18px}}