*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f4f7fb;color:#16263d}button,input,select,textarea{font:inherit}.hidden{display:none!important}.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top right,#eaf6ff,#f7faff 50%,#eef3f8)}.login-card{width:min(440px,92vw);background:#fff;padding:42px;border-radius:28px;box-shadow:0 30px 80px #16385c20}.login-logo{width:220px;max-width:80%;height:auto}.login h1{margin:34px 0 8px;font-size:30px}.login p,.card p{color:#748398}.login label,.formgrid label{display:grid;gap:7px;font-size:13px;font-weight:700;margin-bottom:16px}.login input,.formgrid input,.formgrid select,.formgrid textarea{border:1px solid #d9e3ed;border-radius:12px;padding:12px;background:#fff;outline:none}.login input:focus,.formgrid input:focus,.formgrid select:focus,.formgrid textarea:focus{border-color:#0877c9;box-shadow:0 0 0 3px #0877c915}button{border:0;border-radius:11px;background:#0877c9;color:#fff;padding:12px 18px;font-weight:750;cursor:pointer}.login button{width:100%}.error{color:#b42318;margin-top:12px}.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}aside{background:#fff;border-right:1px solid #e5ebf2;padding:24px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40}.side-head{display:flex;align-items:center;justify-content:space-between}.logo{width:190px;max-height:62px;object-fit:contain;object-position:left center}.icon-btn{display:none;background:transparent;color:#15243b;font-size:28px;padding:5px}aside nav{margin-top:34px;display:grid;gap:6px}aside nav button{background:transparent;color:#64748b;text-align:left;padding:12px 14px;display:flex;gap:12px;align-items:center;font-size:14px}aside nav button.active{background:#eaf5fd;color:#0877c9}.aside-bottom{margin-top:auto;border-top:1px solid #edf1f5;padding-top:18px}.ghost{background:transparent;color:#64748b;padding-left:0}main{padding:30px;max-width:1550px;width:100%;margin:auto}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}header h1{margin:4px 0;font-size:27px}.eyebrow{font-size:11px;letter-spacing:.12em;color:#8492a5;font-weight:800}.live{background:#eaf8ef;color:#1c7c43;padding:8px 12px;border-radius:99px;font-size:12px;font-weight:800}.live i{display:inline-block;width:7px;height:7px;background:#22a75a;border-radius:50%;margin-right:6px}.mobile-brand{display:none}.welcome{background:linear-gradient(115deg,#fff,#eef8ff);border:1px solid #e1ebf4;border-radius:20px;padding:24px 28px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}.welcome h2{font-size:26px;margin:6px 0}.welcome p{margin:0;color:#748398}.welcome-time{font-size:24px;font-weight:800;color:#0877c9}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.stat,.card{background:#fff;border:1px solid #e4ebf2;border-radius:18px;padding:20px;box-shadow:0 6px 20px #24486c08}.stat{position:relative;min-height:132px}.stat img{width:54px;height:54px;object-fit:contain;position:absolute;right:16px;top:16px}.stat span{display:block;color:#718198;font-size:12px;font-weight:750;padding-right:60px}.stat b{font-size:32px;display:block;margin-top:30px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.card{margin-bottom:16px}.card h2{margin:7px 0 10px;font-size:20px}.timer{font-size:38px;font-weight:850;letter-spacing:.04em;margin:18px 0}.actions{display:flex;gap:10px;flex-wrap:wrap}.actions .secondary{background:#edf3f8;color:#29415e}.photo-upload{display:inline-block;margin-top:16px;color:#0877c9;font-size:12px;font-weight:800;cursor:pointer}.photo-upload input{display:none}.phone-person{font-size:25px;font-weight:850;margin:18px 0 5px}.phone-time{color:#718198}.phone-alert{margin-top:20px;background:#fff4e5;color:#9a5b00;padding:12px;border-radius:10px;font-size:13px;font-weight:750}.cardhead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:14px}.cardhead p{margin:5px 0}.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:#748398}.legend span{display:flex;gap:5px;align-items:center}.legend i,.status{width:9px;height:9px;border-radius:50%;display:inline-block}.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:11px}.person{border:1px solid #e5edf4;padding:14px;border-radius:15px;display:flex;align-items:center;gap:12px;background:#fff;cursor:pointer;transition:.18s}.person:hover{transform:translateY(-2px);box-shadow:0 10px 25px #183b6310;border-color:#cbdce9}.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#edf3f8;font-weight:800;overflow:hidden;flex:none}.avatar img{width:100%;height:100%;object-fit:cover}.person b,.person small{display:block}.person small{color:#7b899b;margin-top:3px;line-height:1.35}.person .status{margin-left:auto}.working{background:#20a85b}.break{background:#e7a321}.out{background:#cbd5e1}.holiday{background:#3489d6}.timeline{display:grid}.event{padding:15px 0;border-bottom:1px solid #edf1f5;display:flex;justify-content:space-between}.pill{display:inline-block;padding:5px 9px;border-radius:99px;background:#eef3f8;font-size:11px;font-weight:800;text-transform:capitalize}.pill.approved{background:#e9f8ef;color:#188147}.pill.pending{background:#fff5df;color:#946200}.pill.rejected{background:#fdecec;color:#a62a2a}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.formgrid .wide{grid-column:1/-1}.formgrid button{width:max-content}.row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #edf1f5;gap:12px}.row small{color:#718198}.row-actions{display:flex;gap:7px}.row-actions button{padding:7px 10px;font-size:12px}.danger{background:#b42318}.team-person{display:grid;grid-template-columns:50px 1.5fr 1fr 1fr auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #edf1f5;cursor:pointer}.team-person:hover{background:#fbfdff}.holiday-metric b{font-size:16px}.holiday-metric small{display:block}.rota-board{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:10px;overflow:auto}.rota-day{background:#f8fbfe;border:1px solid #e4ebf2;border-radius:14px;padding:12px;min-height:170px}.rota-day h3{font-size:13px;margin:0 0 10px}.rota-shift{background:#fff;border:1px solid #e5edf4;border-radius:10px;padding:9px;margin-bottom:7px;cursor:pointer}.rota-shift b,.rota-shift small{display:block}.rota-shift small{color:#748398;margin-top:3px}.modal{position:fixed;inset:0;background:#10243b80;display:grid;place-items:center;padding:20px;z-index:100}.modal-card{background:#fff;border-radius:22px;width:min(760px,96vw);max-height:90vh;overflow:auto;padding:28px;position:relative;box-shadow:0 30px 90px #0004}.modal-close{position:absolute;right:16px;top:14px;background:#eef3f8;color:#31455d;border-radius:50%;width:38px;height:38px;padding:0;font-size:22px}.profile-head{display:flex;gap:16px;align-items:center;margin-bottom:20px}.profile-head .avatar{width:72px;height:72px}.profile-head h2{margin:0}.profile-head p{margin:4px 0;color:#748398}.profile-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.metric{background:#f7fafd;border-radius:12px;padding:14px}.metric small{display:block;color:#748398}.metric b{display:block;font-size:20px;margin-top:5px}.report-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #edf1f5}.toast{position:fixed;right:24px;bottom:24px;background:#15243b;color:#fff;padding:14px 18px;border-radius:10px;box-shadow:0 15px 40px #0003;z-index:150}.manager.hidden-role{display:none!important}.nav-shade{display:none}
@media(max-width:900px){.app{display:block}aside{position:fixed;left:-290px;top:0;width:280px;transition:.2s;height:100vh;box-shadow:15px 0 45px #10243b20}aside.open{left:0}.icon-btn{display:block}.nav-shade{display:block;position:fixed;inset:0;background:#10243b66;z-index:30;opacity:0;pointer-events:none;transition:.2s}.nav-shade.show{opacity:1;pointer-events:auto}main{padding:16px}.mobile-brand{display:flex;align-items:center;gap:10px}.mobile-brand img{width:128px;max-height:42px;object-fit:contain}.menu-btn{background:#fff;color:#233a54;border:1px solid #e2eaf1;padding:9px 11px}header>div:nth-child(2){display:none}.stats{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.welcome{padding:20px}.welcome-time{display:none}.cardhead{display:block}.legend{margin-top:12px}.formgrid{grid-template-columns:1fr}.formgrid .wide{grid-column:auto}.people{grid-template-columns:1fr}.team-person,.report-row{grid-template-columns:48px 1fr auto}.team-person>:nth-child(3),.team-person>:nth-child(4),.report-row>:nth-child(3),.report-row>:nth-child(4){display:none}.profile-metrics{grid-template-columns:1fr 1fr}.rota-board{grid-template-columns:repeat(7,180px)}.timer{font-size:32px}}
@media(max-width:520px){.stats{grid-template-columns:1fr 1fr;gap:9px}.stat{min-height:116px;padding:15px}.stat img{width:45px;height:45px}.stat b{font-size:28px;margin-top:25px}.card{padding:16px}.welcome h2{font-size:22px}.profile-metrics{grid-template-columns:1fr}.live{font-size:0}.live i{margin:0}}

/* v1.2.2 layout hardening */
html,body{width:100%;min-height:100%;overflow-x:hidden}.app{width:100%;grid-template-columns:260px minmax(0,1fr)}.app>aside{width:260px;min-width:260px}.app>main{min-width:0;max-width:none;margin:0}.side-head{min-height:64px}.side-head .logo{display:block;width:190px!important;height:auto!important;max-width:190px!important}.side-head .icon-btn{display:none!important}.mobile-brand{display:none!important}aside nav{width:100%}aside nav button{width:100%}.aside-bottom{width:100%}
@media(min-width:901px){#sidebar{left:auto!important;transform:none!important}.nav-shade{display:none!important}.mobile-brand{display:none!important}.side-head .icon-btn{display:none!important}}
@media(max-width:900px){.app{display:block}.app>aside{width:280px;min-width:280px}.side-head .icon-btn{display:block!important}.mobile-brand{display:flex!important}.app>main{width:100%;padding:16px}.logo{width:190px!important}.nav-shade{display:block}}

/* v1.2.4 */
.working-for{font-size:12px;font-weight:800;color:#0f766e;margin-top:6px}
.account-modal{position:fixed;inset:0;background:rgba(15,23,42,.38);z-index:99999;display:flex;justify-content:flex-end}
.account-sheet{width:min(520px,100%);height:100%;overflow:auto;background:#fff;padding:30px;box-shadow:-20px 0 60px rgba(15,23,42,.16);position:relative}
.account-close{position:absolute;right:22px;top:20px;border:0;background:#eef5fb;width:40px;height:40px;border-radius:12px;font-size:24px;cursor:pointer}
.account-head{display:flex;align-items:center;gap:16px;padding:22px 0}
.account-avatar{width:68px;height:68px;border-radius:20px;background:#eef5fb;overflow:hidden;display:grid;place-items:center;font-size:24px;font-weight:900}
.account-avatar img{width:100%;height:100%;object-fit:cover}
.account-head h2{margin:4px 0}.account-head p{margin:0;color:#64748b}
.account-tabs{display:flex;gap:8px;border-bottom:1px solid #e2e8f0;margin-bottom:22px}
.account-tabs button{border:0;background:none;padding:12px 10px;font-weight:800;color:#64748b;cursor:pointer}
.account-tabs button.active{color:#087dcc;border-bottom:3px solid #087dcc}
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.account-grid.one{grid-template-columns:1fr}
.account-sheet label{display:grid;gap:7px;font-size:13px;font-weight:800;margin-bottom:16px}
.account-sheet input{padding:12px;border:1px solid #d7e2ec;border-radius:10px;font:inherit}
.photo-upload{padding:15px;background:#f8fbfe;border:1px dashed #bdd3e4;border-radius:12px}
.account-msg{margin-top:14px;color:#15803d;font-weight:700}
.holiday-balance{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.holiday-balance div{background:#f6f9fc;border:1px solid #e4edf4;border-radius:14px;padding:16px;text-align:center}
.holiday-balance strong{font-size:24px;display:block}.holiday-balance span{font-size:11px;color:#64748b}
.history-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.history-day{min-height:105px;border:1px solid #e2e8f0;border-radius:12px;padding:8px;background:#fff}
.history-person{font-size:11px;font-weight:800;border-left:4px solid var(--employee-colour);padding-left:6px;margin-top:5px}
@media(max-width:700px){.account-grid,.holiday-balance{grid-template-columns:1fr 1fr}.account-sheet{padding:22px}.history-calendar{grid-template-columns:1fr}}

.my-account-floating{position:fixed;right:22px;top:16px;z-index:8000;border:1px solid #d9e5ef;background:#fff;border-radius:12px;padding:10px 15px;font-weight:800;color:#16324f;box-shadow:0 4px 16px rgba(15,23,42,.06);cursor:pointer}
@media(max-width:700px){.my-account-floating{right:70px;top:12px;padding:9px 12px}}

/* v1.2.7 polished SaaS account/navigation */
.my-account-floating{display:none!important}
.saas-userbar{position:fixed;right:22px;top:14px;z-index:9000;display:flex;align-items:center;gap:9px}
.saas-icon-btn,.saas-profile-btn{border:1px solid #dce7ef;background:#fff;box-shadow:0 5px 20px rgba(15,23,42,.06);cursor:pointer}
.saas-icon-btn{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;position:relative;font-size:18px}
.saas-profile-btn{height:46px;border-radius:14px;padding:4px 10px 4px 5px;display:flex;align-items:center;gap:9px}
.saas-profile-avatar{width:36px;height:36px;border-radius:11px;overflow:hidden;background:#eaf3f9;display:grid;place-items:center;font-weight:900;color:#075985}
.saas-profile-avatar img{width:100%;height:100%;object-fit:cover}
.saas-profile-meta{text-align:left;line-height:1.1}.saas-profile-meta strong{display:block;font-size:13px;color:#0f172a}.saas-profile-meta span{font-size:11px;color:#64748b}
.saas-badge{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:20px;background:#dc2626;color:#fff;font:800 10px/18px Arial}
.saas-menu,.notification-panel{position:fixed;right:22px;top:68px;z-index:8999;background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 22px 65px rgba(15,23,42,.16)}
.saas-menu{width:260px;padding:8px}.saas-menu-head{padding:13px;border-bottom:1px solid #edf2f7;margin-bottom:6px}.saas-menu-head strong,.saas-menu-head span{display:block}.saas-menu-head span{font-size:12px;color:#64748b;margin-top:3px}
.saas-menu button{width:100%;border:0;background:none;text-align:left;padding:11px 12px;border-radius:10px;font-weight:700;color:#334155;cursor:pointer}.saas-menu button:hover{background:#f1f7fb;color:#087dcc}
.notification-panel{width:min(390px,calc(100vw - 28px));max-height:72vh;overflow:hidden}
.notification-head{padding:16px 17px;border-bottom:1px solid #edf2f7;display:flex;justify-content:space-between;align-items:center}.notification-head h3{margin:0;font-size:16px}.notification-head button{border:0;background:none;color:#087dcc;font-weight:800;cursor:pointer}
.notification-list{max-height:58vh;overflow:auto;padding:7px}.notification-item{padding:13px;border-radius:12px;display:grid;grid-template-columns:9px 1fr;gap:10px;cursor:pointer}.notification-item:hover{background:#f7fafc}.notification-item.unread{background:#f0f8ff}.notification-dot{width:8px;height:8px;border-radius:50%;background:#087dcc;margin-top:5px}.notification-item.read .notification-dot{background:#cbd5e1}.notification-item strong{display:block;font-size:13px}.notification-item p{font-size:12px;color:#64748b;margin:4px 0}.notification-item time{font-size:10px;color:#94a3b8}
.account-modal{backdrop-filter:blur(4px)}
.account-sheet{width:min(620px,100%);padding:0}
.account-saas-cover{height:105px;background:linear-gradient(135deg,#edf7ff,#f7fbff);border-bottom:1px solid #e6eef5}
.account-head{padding:0 30px 20px;margin-top:-34px;align-items:flex-end}.account-avatar{width:86px;height:86px;border:5px solid #fff;border-radius:22px;box-shadow:0 7px 24px rgba(15,23,42,.1)}
.account-tabs{padding:0 26px;margin:0}.account-sheet section{padding:26px 30px}.account-close{z-index:2;background:#fff}
@media(max-width:700px){.saas-userbar{right:12px;top:10px}.saas-profile-meta{display:none}.saas-profile-btn{padding-right:5px}.saas-menu,.notification-panel{right:10px;top:64px}.account-head{padding-left:20px}.account-sheet section{padding:22px 20px}}