/* Employee mobile app shell inspired by the approved phone reference. */ .employee-mobile-header,.employee-bottom-nav,.employee-app-page{display:none} @media screen and (min-width:761px){ #appView.employee-mobile-app{display:flex;flex-direction:column;width:100%;height:100dvh;min-height:0;overflow:hidden;padding-bottom:68px;background:#f3f7fc} #appView.employee-mobile-app>.portal-header,#appView.employee-mobile-app>#mobileNavToggle,#appView.employee-mobile-app>#nav{display:none!important} #appView.employee-mobile-app>.employee-mobile-header{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px;min-height:82px;padding:10px 24px;background:linear-gradient(110deg,#075493,#0878b2);border-bottom:1px solid #064c80;color:#fff} #appView.employee-mobile-app .employee-mobile-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:16px;font-weight:800} #appView.employee-mobile-app .employee-mobile-brand strong{font-size:16px} #appView.employee-mobile-app .employee-mobile-user{display:flex;align-items:center;gap:9px;color:#fff} #appView.employee-mobile-app .employee-mobile-user>span{display:flex;flex-direction:column;text-align:right} #appView.employee-mobile-app .employee-mobile-user strong{color:#fff;font-size:14px} #appView.employee-mobile-app .employee-mobile-user small{color:#d6eaf7;font-size:11px} #appView.employee-mobile-app .employee-avatar{width:42px;height:42px;border-radius:50%;border:1px solid #ffffff55;background:#ffffff20;color:#fff} #appView.employee-mobile-app .employee-mobile-bell{position:relative;width:40px;height:40px;border:1px solid #ffffff44;border-radius:50%;background:#ffffff14;color:#fff} #appView.employee-mobile-app .employee-mobile-bell b{position:absolute;top:-3px;right:-3px;display:grid;place-items:center;min-width:17px;height:17px;border-radius:50%;background:#ef4444;color:#fff;font-size:10px} #appView.employee-mobile-app>main{flex:1;width:100%;min-height:0;padding:20px 24px 28px;overflow:auto;scrollbar-gutter:stable} #appView.employee-mobile-app .page.active{display:block;width:min(100%,920px);margin:0 auto} #appView.employee-mobile-app .employee-bottom-nav{position:fixed;z-index:40;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:68px;padding:5px max(16px,calc((100vw - 900px)/2));border-top:1px solid #ffffff25;background:#0b4f87;box-shadow:0 -4px 16px #163f7117} #appView.employee-mobile-app .employee-bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border:0;background:transparent;color:#d5e6f4} #appView.employee-mobile-app .employee-bottom-nav button>span{font-size:22px;line-height:1.1} #appView.employee-mobile-app .employee-bottom-nav button small{font-size:11px} #appView.employee-mobile-app .employee-bottom-nav button.active{color:#fff;font-weight:800} #appView.employee-mobile-app .employee-bottom-nav button.active>span{min-width:40px;padding:2px 7px;border-radius:10px;background:#ffffff22} } @media screen and (max-width:760px){ #appView.employee-mobile-app{display:flex;flex-direction:column;min-height:100dvh;height:auto;overflow:visible;background:#f3f7fc;padding-bottom:calc(68px + env(safe-area-inset-bottom))} #appView.employee-mobile-app>.portal-header,#appView.employee-mobile-app>#mobileNavToggle,#appView.employee-mobile-app>#nav{display:none!important} #appView.employee-mobile-app>.employee-mobile-header{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:74px;padding:10px 16px;background:#fff;border-bottom:1px solid #e7edf4;box-shadow:0 2px 10px #173f7208} .employee-mobile-brand{display:flex;align-items:center;gap:8px;color:#153e6d;font-size:13px;font-weight:800;white-space:nowrap}.employee-mobile-brand img{width:38px;height:38px;object-fit:contain;background:#0b5794;border-radius:11px;padding:4px}.employee-mobile-brand small{display:block;margin-top:2px;color:#7b8da2;font-size:9px;font-weight:500;direction:ltr;text-align:right} .employee-mobile-user{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-width:0}.employee-mobile-user>span{display:flex;flex-direction:column;min-width:0;text-align:right}.employee-mobile-user strong{overflow:hidden;color:#173f72;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.employee-mobile-user small{margin-top:3px;color:#7b8da2;font-size:9px}.employee-avatar{width:39px;height:39px;flex:0 0 39px;border:2px solid #dce9f5;border-radius:50%;background:#eaf2fb;color:#176ab0;font-size:17px;font-weight:800} .employee-mobile-bell{position:relative;grid-column:2;grid-row:1;justify-self:center;width:38px;height:38px;border:0;border-radius:50%;background:#f3f7fc;color:#176ab0;font-size:21px}.employee-mobile-bell b{position:absolute;top:-3px;right:-4px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border:2px solid white;border-radius:12px;background:#ef4444;color:white;font-size:9px} #appView.employee-mobile-app>main{width:100%;min-height:calc(100dvh - 142px);padding:16px 15px 24px;overflow:visible;scrollbar-gutter:auto} #appView.employee-mobile-app .page.active{display:block;max-width:620px;margin:0 auto} #appView.employee-mobile-app .employee-bottom-nav{position:fixed;z-index:40;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(4,1fr);min-height:calc(62px + env(safe-area-inset-bottom));padding:5px 8px calc(5px + env(safe-area-inset-bottom));border-top:1px solid #e3ebf3;background:#ffffffed;backdrop-filter:blur(16px)} .employee-bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;padding:3px;border:0;background:transparent;color:#7b8da1}.employee-bottom-nav button>span{font-size:21px;line-height:1.1}.employee-bottom-nav button small{font-size:9px}.employee-bottom-nav button.active{color:#1477c9;font-weight:800}.employee-bottom-nav button.active>span{transform:translateY(-1px)} .employee-home-greeting{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 1px 13px}.employee-home-greeting small{color:#70849a;font-size:12px}.employee-home-greeting h2{margin:2px 0;color:#173f72;font-size:19px;font-weight:850}.employee-home-greeting p{margin:0;color:#8394a7;font-size:10px} .employee-notice-shortcut{width:100%;min-height:51px;display:flex;align-items:center;gap:11px;margin-bottom:13px;padding:8px 12px;border:1px solid #e3ebf3;border-radius:13px;background:#fff;color:#244868;text-align:right;box-shadow:0 4px 14px #173f7207}.employee-notice-shortcut .mobile-icon{font-size:19px;color:#1778bd}.employee-notice-shortcut b{display:grid;place-items:center;min-width:21px;height:21px;border-radius:50%;background:#fce8e8;color:#d54545;font-size:10px}.employee-notice-shortcut .mobile-chevron{margin-right:auto;color:#9aa9b8;font-size:22px} .employee-current-time{position:relative;overflow:hidden;margin-bottom:13px;padding:17px 16px 15px;border-radius:17px;background:linear-gradient(120deg,#126ec3,#1688bf 54%,#21aa78);color:#fff;text-align:center;box-shadow:0 9px 22px #087aa626}.employee-current-time:before,.employee-current-time:after{position:absolute;content:"";width:190px;height:190px;border:1px solid #ffffff20;border-radius:50%;pointer-events:none}.employee-current-time:before{top:-135px;right:-75px}.employee-current-time:after{bottom:-157px;left:-76px}.time-caption{position:relative;font-size:11px;opacity:.88}.employee-big-clock{position:relative;margin:3px 0 1px;font-size:39px;font-weight:850;line-height:1.2;font-variant-numeric:tabular-nums;direction:ltr}.employee-date-line{position:relative;font-size:10px;opacity:.9} .employee-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}.employee-action-grid button{min-height:101px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:11px 7px;border:1px solid #e3ebf3;border-radius:15px;background:#fff;color:#17436d;box-shadow:0 5px 15px #173f7209}.employee-action-grid .employee-primary-action{background:linear-gradient(145deg,#0d9c6b,#13a775);border-color:#0d9c6b;color:#fff}.employee-action-grid .action-symbol{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;background:#e9f4ff;color:#1176c5;font-size:20px;font-weight:800}.employee-action-grid .employee-primary-action .action-symbol{background:#ffffff24;color:#fff}.employee-action-grid strong{font-size:13px}.employee-action-grid small{font-size:9px;opacity:.78}.employee-action-grid button:disabled{opacity:.48;filter:saturate(.55)} .employee-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:19px}.employee-stat-card{min-height:103px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px;border:1px solid #e8edf3;border-radius:13px;background:#fff;box-shadow:0 4px 13px #173f7208}.employee-stat-card>span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#e9f6ef;color:#149565;font-size:16px;font-weight:800}.employee-stat-card small{color:#60778d;font-size:10px}.employee-stat-card b{color:#183e64;font-size:20px;line-height:1.05;font-variant-numeric:tabular-nums}.employee-stat-card em{color:#9aa7b4;font-size:8px;font-style:normal}.employee-stat-card.stat-late>span{background:#fff4dc;color:#dfa200}.employee-stat-card.stat-absent>span{background:#fdeaea;color:#d9504b} .employee-section-title{display:flex;align-items:center;justify-content:space-between;margin:5px 2px 9px}.employee-section-title h3{margin:0;color:#173f72;font-size:14px;font-weight:800}.employee-section-title button{min-height:auto;padding:3px 5px;border:0;background:none;color:#1477bd;font-size:10px} .employee-recent-list,.employee-record-list,.employee-notice-list,.employee-more-list,.employee-profile-card,.employee-calendar-card{overflow:hidden;border:1px solid #e4ebf2;border-radius:15px;background:#fff;box-shadow:0 5px 16px #173f7208}.employee-recent-row,.employee-record-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;padding:12px 13px;border-bottom:1px solid #edf1f5}.employee-recent-row:last-child,.employee-record-row:last-child{border-bottom:0}.employee-row-date{display:flex;flex-direction:column;gap:4px;color:#193e61;font-size:11px;font-weight:700}.employee-row-date small{color:#8494a5;font-size:9px;font-weight:400}.employee-row-times{display:flex;align-items:center;gap:9px;color:#365b7b;font-size:10px;direction:ltr;font-variant-numeric:tabular-nums}.employee-row-times span{white-space:nowrap}.employee-row-state{grid-column:1/-1;justify-self:start;padding:3px 8px;border-radius:12px;background:#e8f6ef;color:#138357;font-size:9px}.employee-empty-state{padding:24px 15px;color:#8495a8;font-size:12px;text-align:center} .employee-screen-title{margin:4px 1px 17px}.employee-screen-title h2{margin:0;color:#173f72;font-size:21px;font-weight:850}.employee-screen-title p{margin:4px 0 0;color:#8292a4;font-size:11px} .employee-report-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.employee-report-stats>div{display:grid;gap:3px;padding:12px 7px;border:1px solid #e4ebf2;border-radius:12px;background:white;text-align:center}.employee-report-stats b{color:#16456e;font-size:18px}.employee-report-stats span{color:#8393a4;font-size:9px} .employee-calendar-card{padding:13px 11px}.employee-calendar-head{display:flex;align-items:center;justify-content:space-between;margin:0 4px 13px;color:#173f72}.employee-calendar-head strong{font-size:13px}.employee-calendar-head button{width:32px;height:32px;border:0;border-radius:9px;background:#f1f6fb;color:#176eb0;font-size:22px}.employee-weekdays,.employee-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}.employee-weekdays{margin-bottom:7px;color:#8494a5;font-size:9px}.employee-calendar-grid button,.employee-calendar-grid span{aspect-ratio:1;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#405c75;font-size:10px;font-variant-numeric:tabular-nums}.employee-calendar-grid button.today{outline:1px solid #1681cb;color:#0878c3;font-weight:800}.employee-calendar-grid button.selected{background:#1878bf;color:#fff;font-weight:800}.employee-calendar-grid button.has-present:not(.selected):after{content:"";width:4px;height:4px;margin-top:-5px;border-radius:50%;background:#15966c}.employee-calendar-grid button.has-late:not(.selected):after{background:#e5a700}.employee-calendar-grid button.has-absent:not(.selected):after{background:#df5146}.employee-calendar-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:13px;padding-top:10px;border-top:1px solid #edf1f5;color:#71859a;font-size:9px}.employee-calendar-legend span{display:flex;align-items:center;gap:5px}.employee-calendar-legend i{width:7px;height:7px;border-radius:50%;background:#15966c}.employee-calendar-legend .late-dot{background:#e6a900}.employee-calendar-legend .absent-dot{background:#df5146}.employee-calendar-legend .leave-dot{background:#1683c0} .employee-profile-card{padding:19px 15px}.employee-profile-top{display:flex;flex-direction:column;align-items:center;padding:8px 0 18px;border-bottom:1px solid #edf1f5;text-align:center}.employee-profile-large-avatar{width:76px;height:76px;display:grid;place-items:center;margin-bottom:9px;border:5px solid #e9f2fb;border-radius:50%;background:#dceaf8;color:#176eb0;font-size:27px;font-weight:800}.employee-profile-top h3{margin:0;color:#153e6d;font-size:16px}.employee-profile-top p{margin:4px;color:#8293a5;font-size:10px}.employee-profile-field{display:flex;justify-content:space-between;gap:8px;padding:12px 3px;border-bottom:1px solid #f0f3f6;font-size:11px}.employee-profile-field:last-child{border:0}.employee-profile-field span{color:#7d8fa2}.employee-profile-field b{color:#254967;text-align:left} .employee-notice-list{padding:2px 12px}.employee-notice-card{position:relative;margin:10px 0;padding:12px 12px 12px 32px;border:1px solid #e9eef4;border-radius:12px;background:#fff;color:#294b69;font-size:11px;line-height:1.75}.employee-notice-card:before{position:absolute;top:13px;right:12px;width:9px;height:9px;border-radius:50%;background:#1683c0;content:""}.employee-notice-card.success:before{background:#16986b}.employee-notice-card.warning:before{background:#e3a100}.employee-notice-card.danger:before{background:#dd514a}.employee-notice-card small{display:block;margin-top:4px;color:#92a0ae;font-size:9px} .employee-more-list{padding:4px 11px}.employee-more-list button{width:100%;min-height:53px;display:flex;align-items:center;gap:11px;padding:7px 5px;border:0;border-bottom:1px solid #edf1f5;background:#fff;color:#244968;text-align:right;font-size:12px}.employee-more-list button:last-child{border-bottom:0}.employee-more-list button>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#eef5fb;color:#1577b9;font-size:17px}.employee-more-list button i{margin-right:auto;color:#9aa9b7;font-size:20px;font-style:normal}.employee-more-list .employee-logout{color:#d84b49}.employee-more-list .employee-logout>span{background:#fff0ef;color:#d84b49}.employee-contact-card{margin-top:13px;padding:14px;border:1px solid #e5edf4;border-radius:13px;background:#edf5fc;color:#71869a;font-size:10px;text-align:center}.employee-contact-card strong{display:block;margin-top:5px;color:#174771;font-size:16px} /* Punch and request forms retain the existing server-backed attendance actions. */ #appView.employee-mobile-app #mobileAttendance .employee-punch-heading{display:flex;align-items:center;gap:11px;margin:0 0 12px;padding:0 1px 13px;border-bottom:1px solid #e0e9f1}.employee-back-button{width:34px;height:34px;flex:0 0 34px;border:0;border-radius:10px;background:#fff;color:#1b6fab;font-size:25px}#appView.employee-mobile-app #mobileAttendance .page-head h2{margin:0;color:#173f72;font-size:18px}#appView.employee-mobile-app #mobileAttendance .page-head p{display:none} #appView.employee-mobile-app .mobile-clock-employee{margin:0 0 12px;padding:12px;border:1px solid #deebf5;border-radius:13px;background:#eaf4fc;color:#234969;font-size:12px;line-height:1.8}#appView.employee-mobile-app .mobile-clock-panel{padding:15px;border:1px solid #e4ebf2;border-radius:16px;background:#fff;box-shadow:0 5px 16px #173f7208}#appView.employee-mobile-app #mobileClockStatus{margin:0 0 12px;padding:12px;border-radius:11px;background:#f5f8fb;color:#395c7a;font-size:11px;line-height:1.9}#appView.employee-mobile-app #mobileClockFeedback{margin:9px 0;color:#178558;font-size:11px;line-height:1.7} #appView.employee-mobile-app #employeeHomeActions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 13px}#appView.employee-mobile-app #employeeHomeActions button{min-height:48px;margin:0;padding:9px 6px;border-radius:11px;font-size:12px}#appView.employee-mobile-app #employeeHomeActions .action-clock-in{background:#119968;border-color:#119968;color:#fff}#appView.employee-mobile-app #employeeHomeActions .action-clock-out{background:#fff;border-color:#1680bf;color:#1378b4}#appView.employee-mobile-app #employeeHomeActions .action-site-leave,#appView.employee-mobile-app #employeeHomeActions .action-leave-request{min-height:40px;background:#f3f7fb;border-color:#e2eaf1;color:#355976;font-size:10px} #appView.employee-mobile-app #mobileSiteLeave .page-head,#appView.employee-mobile-app #employeeLeaveRequest .page-head{display:flex;align-items:center;gap:8px}#appView.employee-mobile-app #mobileSiteLeave .page-head p,#appView.employee-mobile-app #employeeLeaveRequest .page-head p{display:block} #appView.employee-mobile-app #mobileSiteLeave .mobile-clock-panel,#appView.employee-mobile-app #employeeLeaveRequest .panel{padding:15px;border-radius:15px;background:#fff}#appView.employee-mobile-app .form-row{grid-template-columns:minmax(0,1fr);gap:12px} #appView.employee-mobile-app .employee-app-page .page-head{display:none} #appView.employee-mobile-app .dashboard-heading{display:none} #appView.employee-mobile-app .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} #loginView{min-height:100dvh;padding:20px;background:#f3f7fc}#loginView .login-card{width:min(100%,390px);padding:0 0 22px;overflow:hidden;border:1px solid #e3eaf1;border-radius:21px;background:#fff;box-shadow:0 14px 40px #173f7215}#loginView .login-card>img{width:100%;height:185px;display:block;object-fit:contain;padding:18px 0 8px;background:linear-gradient(140deg,#0c5795,#147eae 58%,#10a477)}#loginView .login-card h1{margin:13px 21px 3px;color:#173f72;font-size:20px;text-align:center}#loginView .login-card p{margin:0 21px 18px;color:#8192a4;font-size:11px;text-align:center}#loginView .login-card label{margin:12px 21px;color:#375670;font-size:11px}#loginView .login-card input{width:100%;min-height:44px;border-radius:10px}#loginView .login-card>button{width:calc(100% - 42px);min-height:45px;margin:9px 21px 0;border-radius:10px;background:#126fba;font-size:14px} #loginView.login-shell{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:0;background:#f5f7fb}.mobile-login-intro:not([hidden]){width:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:calc(28px + env(safe-area-inset-top)) 24px calc(25px + env(safe-area-inset-bottom));overflow:hidden;background:linear-gradient(180deg,#f8fbff 0%,#fff 100%);text-align:center}.mobile-login-brand{width:calc(100% + 48px);min-height:80px;display:flex;align-items:center;justify-content:center;gap:11px;margin:-28px -24px 0;padding:calc(13px + env(safe-area-inset-top)) 15px 11px;background:linear-gradient(110deg,#09528f,#087cad 65%,#12a174);color:#fff;text-align:right}.mobile-login-brand img{width:49px;height:49px;object-fit:contain}.mobile-login-brand strong{display:block;font-size:15px}.mobile-login-brand small{display:block;margin-top:3px;font-size:10px;direction:ltr;text-align:right;opacity:.9}.mobile-login-intro h1{margin:26px 0 6px;color:#173f72;font-size:21px;font-weight:850}.mobile-login-intro>p{margin:0;color:#70869b;font-size:12px}.login-building-art{width:calc(100% + 42px);height:min(31vh,240px);min-height:175px;margin:18px -21px 12px;align-self:stretch;border-radius:18px;box-shadow:0 8px 24px #17466b16}.mobile-login-primary{width:100%;min-height:51px;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:auto;border:0;border-radius:11px;background:linear-gradient(100deg,#0c70c0,#0875b8);color:#fff;font-size:15px;font-weight:800;box-shadow:0 7px 18px #0d70b52b}.mobile-login-primary span{font-size:23px}.mobile-login-caption{margin-top:12px;color:#7189a0;font-size:10px}.mobile-login-back{display:none!important} #appView.employee-mobile-app #mobileAttendance .employee-punch-card{display:flex;flex-direction:column;align-items:center;margin:0 0 13px;padding:20px 14px 15px;border:1px solid #e3ebf2;border-radius:16px;background:#fff;text-align:center;box-shadow:0 5px 16px #173f7208}.employee-punch-clock-icon{width:72px;height:72px;display:grid;place-items:center;margin:0 0 9px;border:6px solid #e7f0fc;border-radius:50%;background:#f6faff;color:#1378c2;font-size:38px}.employee-punch-card>strong{color:#173f72;font-size:15px}.employee-punch-time{margin:4px 0;color:#173f72;font-size:35px;font-weight:850;line-height:1.2;direction:ltr;font-variant-numeric:tabular-nums}.employee-punch-date{margin-bottom:13px;color:#71869c;font-size:11px}.employee-punch-card>button{width:100%;min-height:53px;display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:11px;background:#109b68;color:#fff;font-size:13px}.employee-punch-card>button>span{font-size:21px}.employee-punch-card>button:disabled{background:#c9d7e3;color:#6f8192;box-shadow:none}.employee-punch-location{margin-top:10px;color:#74889c;font-size:10px;line-height:1.65}.employee-punch-heading .employee-back-button{font-size:25px} #appView.employee-mobile-app #mobileAttendance #employeeHomeActions{display:none!important} #appView.employee-mobile-app #mobileAttendance .legacy-clock-compat{display:none!important} #appView.employee-mobile-app #mobileAttendance #mobileClockFeedback{width:100%;margin:0;padding:10px 11px;border-radius:10px;background:#edf7f1;color:#22714e;text-align:center} #appView.employee-mobile-app #employeeAppHome .employee-action-grid button{cursor:pointer} /* Refined welcome and sign-in screens for small phones. */ #loginView.login-shell{align-items:stretch;justify-content:center;background:radial-gradient(ellipse at 50% 0,#e5f1fc 0%,#f4f7fb 45%,#f7f9fc 100%)} .mobile-login-intro:not([hidden]){position:relative;width:min(100%,460px);min-height:100dvh;justify-content:flex-start;padding:calc(22px + env(safe-area-inset-top)) 24px calc(22px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#f8fbff 0%,#fff 75%);box-shadow:0 0 50px #183c6010} .mobile-login-brand{position:relative;width:calc(100% + 48px);min-height:91px;justify-content:flex-start;gap:12px;margin:-22px -24px 0;padding:calc(14px + env(safe-area-inset-top)) 23px 12px;border-radius:0 0 21px 21px;background:linear-gradient(112deg,#0c4d88 0%,#0877a7 60%,#11956f 100%);box-shadow:0 8px 22px #0b578e24;text-align:right} .mobile-login-brand img{width:53px;height:53px;padding:4px;border:1px solid #ffffff38;border-radius:15px;background:#ffffff12;filter:drop-shadow(0 2px 4px #00365335)} .mobile-login-brand strong{font-size:14px;letter-spacing:.1px}.mobile-login-brand small{color:#d7eee9;font-size:10px;letter-spacing:.55px} .login-brand-dot{width:8px;height:8px;margin-right:auto;border-radius:50%;background:#5fe0ac;box-shadow:0 0 0 5px #ffffff16} .login-welcome-copy{width:100%;margin:25px 0 0;text-align:right}.login-eyebrow{display:inline-flex;align-items:center;min-height:25px;padding:4px 9px;border:1px solid #dbe9f5;border-radius:15px;background:#eff6fc;color:#28709d;font-size:9px;font-weight:700}.login-welcome-copy h1{margin:10px 0 5px;color:#153e6c;font-size:23px;font-weight:850;letter-spacing:-.25px}.login-welcome-copy p{margin:0;color:#72869a;font-size:12px;line-height:1.8} .login-building-art{width:calc(100% + 30px);height:min(33vh,260px);min-height:185px;margin:17px -15px 13px;border:1px solid #dce8f1;border-radius:19px;box-shadow:0 12px 28px #163e6417} .mobile-login-primary{position:relative;min-height:54px;margin-top:auto;border-radius:13px;background:linear-gradient(105deg,#116fc0 0%,#087fba 54%,#11966e 100%);font-size:14px;letter-spacing:.1px;box-shadow:0 9px 21px #0878ac31;transition:transform .15s,box-shadow .15s}.mobile-login-primary:active{transform:scale(.985);box-shadow:0 4px 12px #0878ac20}.mobile-login-primary span{font-size:19px} .mobile-login-caption{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:13px;color:#8394a5;font-size:10px}.mobile-login-caption span{color:#15986d;font-size:8px} #loginView .login-card{position:relative;width:min(100%,410px);max-height:calc(100dvh - 24px);margin:auto;padding:23px 22px 22px;overflow:auto;border:1px solid #e2eaf1;border-top:0;border-radius:22px;background:#fff;box-shadow:0 17px 45px #173f7218;text-align:right;animation:mobileLoginEnter .28s ease-out both} #loginView .login-card>img{width:68px;height:68px;margin:5px auto 11px;padding:6px;border:1px solid #e7edf3;border-radius:19px;background:linear-gradient(135deg,#eff6fc,#fff);object-fit:contain} #loginView .login-card h1{margin:0;color:#153e6d;font-size:21px;font-weight:850;text-align:center}.portal-title-mobile{display:block!important}.portal-title-desktop{display:none!important}.portal-subtitle{display:block!important;margin-top:5px;color:#8797a7;font-size:10px;font-weight:400} #loginView .login-card p{margin:8px 0 19px;color:#7e90a2;font-size:10px;text-align:center} #loginView .login-card label{display:block;margin:12px 0;color:#355570;font-size:11px;font-weight:700} #loginView .login-card label>span{display:block;margin-bottom:6px} #loginView .login-card input{min-height:47px;padding:11px 13px;border:1px solid #d9e4ed;border-radius:11px;background:#fafdff;color:#183b59;font-size:13px;text-align:right;transition:border-color .18s,box-shadow .18s,background .18s} #loginView .login-card input:focus{border-color:#2786bd;background:#fff;box-shadow:0 0 0 4px #2185bb18} #loginView .login-card input::placeholder{color:#a2afbb;font-size:11px} #loginView .login-card>button.primary{width:100%;min-height:49px;justify-content:center;gap:8px;margin:17px 0 0;border:0;border-radius:11px;background:linear-gradient(105deg,#0878ba,#10996c);font-size:13px;box-shadow:0 7px 17px #0c82a52b} #loginView .login-card>button.primary span{font-size:17px} #loginView .login-card>button.mobile-login-back{width:auto!important;min-height:31px!important;display:inline-flex!important;justify-content:flex-start!important;margin:0 0 2px!important;padding:2px 5px!important;border:0!important;background:transparent!important;color:#31719b!important;font-size:10px!important;box-shadow:none!important} #loginView .login-card .error{min-height:0;margin:10px 0 0;padding:0 4px;color:#b42318;font-size:11px;text-align:center} @keyframes mobileLoginEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} html,body{width:100%;max-width:100%;overflow-x:hidden} #loginView.login-shell{width:100%;height:100vh;height:100dvh;min-height:0;max-width:100%;overflow:hidden} .mobile-login-intro:not([hidden]){height:100vh;height:100dvh;min-height:0;max-height:100dvh;overflow:hidden;flex:0 0 auto} .login-building-art{height:clamp(145px,27vh,225px);min-height:0;flex:0 1 auto} #loginView .login-card{flex:0 1 auto} @media screen and (max-width:760px) and (max-height:700px){ .mobile-login-intro:not([hidden]){padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))} .mobile-login-brand{min-height:72px;margin-top:-14px;padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:8px;border-radius:0 0 17px 17px} .mobile-login-brand img{width:45px;height:45px}.login-welcome-copy{margin-top:14px}.login-welcome-copy h1{margin:7px 0 3px;font-size:20px}.login-welcome-copy p{font-size:11px;line-height:1.55} .login-building-art{height:clamp(120px,23vh,165px);min-height:0;margin:10px -12px 8px} .mobile-login-primary{min-height:47px}.mobile-login-caption{margin-top:8px} } @media screen and (max-width:760px) and (max-height:590px){ .mobile-login-brand{min-height:64px}.mobile-login-brand img{width:39px;height:39px}.login-welcome-copy{margin-top:10px}.login-building-art{height:19vh;min-height:100px;margin:7px -10px 5px}.mobile-login-primary{min-height:43px}.mobile-login-caption{margin-top:5px;font-size:9px} } /* Clear branded app title and employee tools in the top bar. */ #appView.employee-mobile-app>.employee-mobile-header{grid-template-columns:1fr 1fr;grid-template-rows:42px 36px;gap:3px 8px;min-height:92px;padding:calc(7px + env(safe-area-inset-top)) 15px 7px;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);border-bottom:1px solid #e5edf4;box-shadow:0 3px 14px #153e6b0a} #appView.employee-mobile-app .employee-mobile-brand{grid-column:1/-1;grid-row:1;justify-self:center;gap:8px;color:#153f70;font-size:13px} #appView.employee-mobile-app .employee-mobile-brand img{width:34px;height:34px;padding:2px;border:0;border-radius:9px;background:linear-gradient(135deg,#0d62a0,#119675)} #appView.employee-mobile-app .employee-mobile-brand span{display:flex;align-items:baseline;gap:6px} #appView.employee-mobile-app .employee-mobile-brand strong{font-size:13px;font-weight:850;white-space:nowrap} #appView.employee-mobile-app .employee-mobile-brand small{margin:0;color:#8192a3;font-size:9px;direction:rtl;text-align:right;white-space:nowrap} #appView.employee-mobile-app .employee-mobile-user{grid-column:1;grid-row:2;justify-self:start;justify-content:flex-start;gap:7px;min-width:0} #appView.employee-mobile-app .employee-mobile-user .employee-avatar{width:31px;height:31px;flex-basis:31px;border:1px solid #d8e7f3;background:linear-gradient(145deg,#e4f0fb,#f2f8fc);font-size:13px} #appView.employee-mobile-app .employee-mobile-user>span{align-items:flex-start;text-align:right} #appView.employee-mobile-app .employee-mobile-user strong{max-width:135px;color:#294a68;font-size:10px} #appView.employee-mobile-app .employee-mobile-user small{margin-top:1px;color:#8b9aab;font-size:8px} #appView.employee-mobile-app .employee-mobile-bell{grid-column:2;grid-row:2;justify-self:end;width:32px;height:32px;border:1px solid #e4edf5;background:#f4f8fc;color:#1677b6;font-size:18px} #appView.employee-mobile-app .employee-mobile-bell svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #appView.employee-mobile-app .employee-mobile-bell b{top:-5px;right:-5px;min-width:15px;height:15px;border-width:1px;font-size:8px} /* Intentional colors make the four employee actions easy to distinguish. */ #appView.employee-mobile-app .employee-action-grid{gap:11px;margin-bottom:16px} #appView.employee-mobile-app .employee-action-grid button{min-height:108px;border-radius:16px;transition:transform .15s,box-shadow .15s} #appView.employee-mobile-app .employee-action-grid button:active{transform:scale(.98)} #appView.employee-mobile-app .employee-action-grid .employee-primary-action{background:linear-gradient(145deg,#13a576,#078b60);border-color:#0d9c6b;box-shadow:0 8px 17px #0c9a6927} #appView.employee-mobile-app .employee-action-grid .employee-secondary-action{border-color:#cfe2f4;background:linear-gradient(145deg,#f4f9ff,#e8f2fc);color:#176ca8} #appView.employee-mobile-app .employee-action-grid .employee-secondary-action .action-symbol{background:#d9ebfc;color:#0c73bb} #appView.employee-mobile-app .employee-action-grid strong{font-size:13px;font-weight:850} #appView.employee-mobile-app #employeeHomeActions button{font-weight:800;box-shadow:0 4px 11px #17446c12} #appView.employee-mobile-app #employeeHomeActions .action-site-leave{border-color:#e8aa35;background:linear-gradient(130deg,#f0a817,#d88908);color:#fff} #appView.employee-mobile-app #employeeHomeActions .action-leave-request{border-color:#2b8ac6;background:linear-gradient(130deg,#3999d1,#2178b5);color:#fff} #appView.employee-mobile-app .employee-more-list button{min-height:55px;transition:background .15s} #appView.employee-mobile-app .employee-more-list button:active{background:#f2f7fb} #appView.employee-mobile-app .employee-more-list button:nth-child(1)>span{background:#fff3da;color:#d18b05} #appView.employee-mobile-app .employee-more-list button:nth-child(2)>span{background:#eaf3fc;color:#1879bb} #appView.employee-mobile-app .employee-more-list button:nth-child(3)>span{background:#e9f6ee;color:#159367} #appView.employee-mobile-app .employee-more-list button:nth-child(4)>span{background:#fff3df;color:#d48c13} #appView.employee-mobile-app .employee-more-list button:nth-child(5)>span{background:#eaf3fc;color:#1879bb} #appView.employee-mobile-app .employee-more-list button:nth-child(6)>span{background:#f0edfb;color:#725bb1} #appView.employee-mobile-app .employee-more-list button:nth-child(7)>span{background:#edf2f7;color:#53718d} #appView.employee-mobile-app #employeeLeaveSubmit,#appView.employee-mobile-app #siteLeaveActions button{min-height:47px;border-radius:11px;font-weight:800} #appView.employee-mobile-app #employeeLeaveSubmit{border-color:#108f68;background:linear-gradient(105deg,#0b9b6b,#1285a6);box-shadow:0 6px 15px #0e906d25} #appView.employee-mobile-app #siteLeaveActions button{border-color:#d89519;background:linear-gradient(105deg,#e9a321,#d68912);color:#fff} #appView.employee-mobile-app .employee-bottom-nav button.active{color:#0d75bd} #appView.employee-mobile-app .employee-bottom-nav button.active>span{width:34px;height:26px;display:grid;place-items:center;border-radius:10px;background:#e8f3fc} } #appView.employee-mobile-app #mobileAttendance .employee-overtime-reason{margin-top:12px;padding:14px;border:1px solid #f0d39a;border-radius:13px;background:#fff9e9;color:#244662;text-align:right} #appView.employee-mobile-app #mobileAttendance .employee-overtime-reason[hidden]{display:none!important} #appView.employee-mobile-app #mobileAttendance .employee-overtime-reason label{display:block;margin-bottom:8px;font-weight:750} #appView.employee-mobile-app #mobileAttendance .employee-overtime-reason textarea{width:100%;min-height:86px;padding:11px;border:1px solid #d7c38e;border-radius:10px;background:#fff;font:inherit;resize:vertical} #appView.employee-mobile-app #mobileAttendance .employee-overtime-reason button{width:100%;min-height:44px;margin-top:9px;border:0;border-radius:10px;background:#176eb1;color:#fff;font:inherit;font-weight:700} #appView.employee-mobile-app #mobileAttendance .employee-overtime-reason button:disabled{opacity:.65} #appView.employee-mobile-app #mobileAttendance #employeeOvertimeReasonStatus{margin-top:7px;color:#47724f;font-size:12px} /* v131: blue mobile app chrome so the updated navigation theme is visible on phones. */ @media screen and (max-width:760px){ #appView.employee-mobile-app>.employee-mobile-header{background:linear-gradient(110deg,#075493,#0878b2);border-bottom-color:#064c80;box-shadow:0 3px 14px #07549324} #appView.employee-mobile-app .employee-mobile-brand{color:#fff} #appView.employee-mobile-app .employee-mobile-brand small{color:#d8ebf7} #appView.employee-mobile-app .employee-mobile-brand img{background:#fff;border:1px solid #ffffff70} #appView.employee-mobile-app .employee-mobile-user strong{color:#fff} #appView.employee-mobile-app .employee-mobile-user small{color:#d8ebf7} #appView.employee-mobile-app .employee-avatar{background:#ffffff1f;border-color:#ffffff80;color:#fff} #appView.employee-mobile-app .employee-mobile-bell{background:#ffffff1f;color:#fff} #appView.employee-mobile-app .employee-bottom-nav{background:#0b4f87ed;border-top:1px solid #ffffff26} #appView.employee-mobile-app .employee-bottom-nav button{color:#c8def0} #appView.employee-mobile-app .employee-bottom-nav button.active{color:#fff} #appView.employee-mobile-app .employee-bottom-nav button.active>span{background:#ffffff20} } /* v133: improve mobile header readability and make attendance actions stand out. */ @media screen and (max-width:760px){ #appView.employee-mobile-app>.employee-mobile-header{grid-template-rows:44px 29px;min-height:84px;padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:7px} #appView.employee-mobile-app .employee-mobile-user strong{max-width:170px;font-size:14px;font-weight:800;line-height:1.35} #appView.employee-mobile-app .employee-mobile-user small{font-size:11px;line-height:1.3} #appView.employee-mobile-app .employee-mobile-brand strong{font-size:14px;font-weight:800;line-height:1.4;letter-spacing:0} #appView.employee-mobile-app .employee-mobile-brand small{display:block;font-size:10px;color:#d8ebf7} #appView.employee-mobile-app .employee-mobile-bell{width:42px;height:42px;color:#fff;background:#ffffff24} #appView.employee-mobile-app .employee-mobile-bell svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8} #appView.employee-mobile-app .employee-bottom-nav button small{font-size:10px;font-weight:650} #appView.employee-mobile-app .employee-bottom-nav button>span{font-size:23px} #appView.employee-mobile-app #employeeAppHome .employee-action-grid .employee-primary-action{background:linear-gradient(140deg,#1689e6,#075cb8);border-color:#075cb8;box-shadow:0 8px 20px #0874cf35;color:#fff} #appView.employee-mobile-app #employeeAppHome .employee-action-grid .employee-primary-action .action-symbol{background:#ffffff24;color:#fff} #appView.employee-mobile-app #employeeAppHome .employee-action-grid .employee-secondary-action{background:linear-gradient(145deg,#0c8eb0,#08749a);border-color:#08749a;color:#fff;box-shadow:0 7px 18px #087b9b30} #appView.employee-mobile-app #employeeAppHome .employee-action-grid .employee-secondary-action .action-symbol{background:#ffffff24;color:#fff} #appView.employee-mobile-app #employeeAppHome .employee-action-grid strong{font-size:14px;font-weight:850} #appView.employee-mobile-app #employeeAppHome .employee-action-grid small{font-size:10px;color:#eaf6ff} } /* v125: show the company welcome, logo, artwork, and credentials together. */ @media screen and (max-width:760px){ #loginView.login-shell{display:flex;align-items:stretch;justify-content:center;width:100%;height:100dvh;min-height:0;padding:0;overflow:hidden;background:#f7f9fc} .mobile-login-intro:not([hidden]){width:100%;height:100dvh;min-height:0;max-height:100dvh;justify-content:flex-start;gap:0;padding:calc(12px + env(safe-area-inset-top)) 23px calc(15px + env(safe-area-inset-bottom));overflow-y:auto;overflow-x:hidden;background:linear-gradient(180deg,#f6faff,#fff 78%);text-align:center} .mobile-login-brand{width:calc(100% + 46px);min-height:70px;flex:0 0 70px;justify-content:center;gap:10px;margin:-12px -23px 0;padding:8px 17px;border-radius:0 0 17px 17px;background:linear-gradient(110deg,#07518e,#0879ad 63%,#11966e);color:#fff;box-shadow:0 5px 15px #0d5b8c1b} .mobile-login-brand img{width:50px;height:52px;padding:0;border:0;border-radius:0;background:transparent;object-fit:cover;object-position:top;filter:none} .mobile-login-brand>div{display:block;text-align:right}.mobile-login-brand strong{font-size:14px}.mobile-login-brand small{margin-top:2px;color:#e2f4f4;font-size:10px;letter-spacing:0} .login-brand-dot{display:none} .login-welcome-copy{width:100%;margin:13px 0 0;text-align:center} .login-eyebrow{display:none} .login-welcome-copy h1{margin:0 0 4px;font-size:20px} .login-welcome-copy p{font-size:10px;line-height:1.5} .login-building-art{width:calc(100% + 28px);height:clamp(120px,21vh,175px);min-height:120px;flex:0 1 auto;margin:10px -14px 7px;border-radius:15px;object-fit:cover;box-shadow:0 7px 18px #17466b18} .mobile-login-primary,.mobile-login-caption{display:none!important} #loginView .mobile-login-intro #loginForm{position:relative;width:100%;max-width:none;max-height:none;flex:0 0 auto;margin:0;padding:1px 0 0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:right;animation:none} #loginView .mobile-login-intro #loginForm> .mobile-login-back, #loginView .mobile-login-intro #loginForm>img, #loginView .mobile-login-intro #loginForm>h1, #loginView .mobile-login-intro #loginForm>p{display:none!important} #loginView .mobile-login-intro #loginForm label{display:block;margin:7px 0;color:#355570;font-size:10px;font-weight:750} #loginView .mobile-login-intro #loginForm label>span{display:block;margin-bottom:4px} #loginView .mobile-login-intro #loginForm input{min-height:42px;padding:9px 12px;border:1px solid #d7e3ed;border-radius:10px;background:#fff;font-size:12px} #loginView .mobile-login-intro #loginForm>button.primary{width:100%;min-height:47px;display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 0;border:0;border-radius:11px;background:linear-gradient(105deg,#0874c4,#086db5);color:white;font-size:13px;font-weight:800;box-shadow:0 6px 16px #0c70b52b} #loginView .mobile-login-intro #loginForm>button.primary span{font-size:17px} #loginView .mobile-login-intro #loginForm .error{margin:5px 0 0;font-size:10px;text-align:center} } @media screen and (max-width:760px) and (max-height:650px){ .mobile-login-brand{min-height:58px;flex-basis:58px}.mobile-login-brand img{width:42px;height:43px} .login-welcome-copy{margin-top:8px}.login-welcome-copy h1{font-size:18px}.login-building-art{height:clamp(90px,17vh,125px);min-height:90px;margin:7px -10px 4px} #loginView .mobile-login-intro #loginForm label{margin:5px 0}#loginView .mobile-login-intro #loginForm input{min-height:38px}#loginView .mobile-login-intro #loginForm>button.primary{min-height:43px;margin-top:7px} } /* v127: consistent typography, spacing, and component sizing across app screens. */ @font-face{font-family:HebronMobileArabic;src:url('assets/NotoSansArabic.ttf') format('truetype');font-display:swap} @media screen and (max-width:760px){ #appView.employee-mobile-app{font-family:HebronMobileArabic,'Segoe UI',Tahoma,Arial,sans-serif;background:#f2f7fc} #appView.employee-mobile-app button,#appView.employee-mobile-app input,#appView.employee-mobile-app select,#appView.employee-mobile-app textarea{font-family:inherit} #appView.employee-mobile-app>main{padding:12px 14px 20px;background:#f2f7fc} #appView.employee-mobile-app .page.active{max-width:500px} #appView.employee-mobile-app .employee-screen-title{display:flex;align-items:center;justify-content:center;min-height:35px;margin:0 0 13px;text-align:center} #appView.employee-mobile-app .employee-screen-title h2{color:#173f72;font-size:15px;font-weight:800;line-height:1.5} #appView.employee-mobile-app .employee-screen-title p{display:none} /* Calendar screen */ #appView.employee-mobile-app .employee-calendar-card{padding:10px 9px 9px;border-color:#e2eaf2;border-radius:13px;box-shadow:0 3px 10px #173f7208} #appView.employee-mobile-app .employee-calendar-head{min-height:34px;margin:0 2px 8px} #appView.employee-mobile-app .employee-calendar-head strong{color:#1a4d7b;font-size:12px;font-weight:800} #appView.employee-mobile-app .employee-calendar-head button{width:29px;height:29px;border-radius:8px;background:#f3f7fb;color:#1478bd;font-size:21px;line-height:1} #appView.employee-mobile-app .employee-weekdays{gap:1px;margin:0 0 5px;padding:7px 0;border-top:1px solid #edf1f5;border-bottom:1px solid #edf1f5;color:#8093a5;font-size:8px;font-weight:700} #appView.employee-mobile-app .employee-calendar-grid{gap:3px} #appView.employee-mobile-app .employee-calendar-grid button,#appView.employee-mobile-app .employee-calendar-grid span{max-width:36px;justify-self:center;width:100%;font-size:10px;font-weight:600} #appView.employee-mobile-app .employee-calendar-grid button.selected{background:#1679c2;box-shadow:0 2px 6px #1679c233} #appView.employee-mobile-app .employee-calendar-grid button.today:not(.selected){outline:1px solid #18a06e;color:#12845d} #appView.employee-mobile-app .employee-calendar-legend{justify-content:space-around;gap:5px;margin-top:8px;padding-top:8px;font-size:8px} #appView.employee-mobile-app .employee-calendar-legend span{gap:4px} #appView.employee-mobile-app .employee-calendar-legend i{width:7px;height:7px} #appView.employee-mobile-app #employeeAppSchedule .employee-section-title{justify-content:flex-start;min-height:32px;margin:8px 2px 5px} #appView.employee-mobile-app #employeeAppSchedule .employee-section-title h3{font-size:12px} #appView.employee-mobile-app #employeeCalendarDayDetails{border-color:#e2eaf2;border-radius:12px;box-shadow:0 3px 10px #173f7208} #appView.employee-mobile-app #employeeCalendarDayDetails .employee-recent-row{grid-template-columns:minmax(0,1fr) auto;gap:5px;padding:9px 11px} #appView.employee-mobile-app #employeeCalendarDayDetails .employee-row-date{font-size:10px} #appView.employee-mobile-app #employeeCalendarDayDetails .employee-row-times{font-size:9px} #appView.employee-mobile-app #employeeCalendarDayDetails .employee-row-state{font-size:8px} /* Profile screen */ #appView.employee-mobile-app .employee-profile-card{padding:0 12px 8px;border-color:#e2eaf2;border-radius:13px;box-shadow:0 3px 10px #173f7208} #appView.employee-mobile-app .employee-profile-top{position:relative;min-height:128px;justify-content:flex-end;padding:52px 0 12px} #appView.employee-mobile-app .employee-profile-large-avatar{position:absolute;top:3px;width:74px;height:74px;margin:0;border:4px solid #e6eff7;background:linear-gradient(145deg,#eaf3fb,#dce9f5);font-size:25px} #appView.employee-mobile-app .employee-profile-top h3{font-size:14px;font-weight:800} #appView.employee-mobile-app .employee-profile-top p{margin:2px 0 0;font-size:10px} #appView.employee-mobile-app .employee-profile-field{min-height:39px;align-items:center;padding:7px 2px;border-color:#edf1f5;font-size:10px} #appView.employee-mobile-app .employee-profile-field span{font-size:9px} #appView.employee-mobile-app .employee-profile-field b{max-width:58%;font-size:10px;font-weight:700} /* More and notifications */ #appView.employee-mobile-app .employee-more-list{padding:2px 9px;border-color:#e2eaf2;border-radius:13px;box-shadow:0 3px 10px #173f7208} #appView.employee-mobile-app .employee-more-list button{min-height:45px;gap:9px;padding:5px 3px;font-size:11px;font-weight:650} #appView.employee-mobile-app .employee-more-list button>span{width:27px;height:27px;flex:0 0 27px;border-radius:8px;font-size:15px} #appView.employee-mobile-app .employee-more-list button i{font-size:17px} #appView.employee-mobile-app .employee-contact-card{margin-top:9px;padding:10px;border-radius:11px;font-size:9px} #appView.employee-mobile-app .employee-contact-card strong{margin-top:3px;font-size:14px} #appView.employee-mobile-app .employee-notice-list{padding:4px 8px;border-color:#e2eaf2;border-radius:13px;box-shadow:0 3px 10px #173f7208} #appView.employee-mobile-app .employee-notice-card{min-height:72px;margin:7px 0;padding:10px 43px 9px 10px;border-color:#e8edf2;border-radius:11px;color:#314f69;font-size:10px;font-weight:700;line-height:1.65} #appView.employee-mobile-app .employee-notice-card:before{top:11px;right:10px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#e9f6ef;color:#16895e;font-size:13px;font-weight:800;content:'✓'} #appView.employee-mobile-app .employee-notice-card.success:before{background:#e7f5ed;color:#139365;content:'✓'} #appView.employee-mobile-app .employee-notice-card.warning:before{background:#fff4dc;color:#d69400;content:'!'} #appView.employee-mobile-app .employee-notice-card.danger:before{background:#fdebea;color:#d94d47;content:'×'} #appView.employee-mobile-app .employee-notice-card small{margin-top:3px;color:#8798a8;font-size:8px;font-weight:400} /* Attendance records */ #appView.employee-mobile-app .employee-report-stats{gap:6px;margin-bottom:9px} #appView.employee-mobile-app .employee-report-stats>div{gap:2px;padding:9px 5px;border-color:#e6edf3;border-radius:10px} #appView.employee-mobile-app .employee-report-stats b{font-size:16px} #appView.employee-mobile-app .employee-report-stats span{font-size:8px} #appView.employee-mobile-app .employee-record-list{border-color:#e2eaf2;border-radius:12px} #appView.employee-mobile-app .employee-record-row{padding:9px 10px} #appView.employee-mobile-app .employee-bottom-nav{font-family:HebronMobileArabic,'Segoe UI',Tahoma,Arial,sans-serif} } /* v124: compact employee home matching the supplied phone reference. */ @media screen and (max-width:760px){ #appView.employee-mobile-app>.employee-mobile-header{grid-template-columns:1fr 1fr;grid-template-rows:37px 25px;gap:0 8px;min-height:75px;padding:calc(5px + env(safe-area-inset-top)) 16px 6px} #appView.employee-mobile-app .employee-mobile-user{grid-column:1;grid-row:1;justify-self:start;gap:7px} #appView.employee-mobile-app .employee-mobile-user .employee-avatar{width:37px;height:37px;flex-basis:37px;border-radius:50%;background:#e6f0fa;color:#164f80} #appView.employee-mobile-app .employee-mobile-user strong{max-width:145px;font-size:11px} #appView.employee-mobile-app .employee-mobile-user small{font-size:9px} #appView.employee-mobile-app .employee-mobile-bell{grid-column:2;grid-row:1;justify-self:end;width:35px;height:35px;border:0;background:transparent} #appView.employee-mobile-app .employee-mobile-brand{grid-column:1/-1;grid-row:2;justify-self:center;align-self:end;line-height:1.2} #appView.employee-mobile-app .employee-mobile-brand span{display:flex;align-items:center;justify-content:center} #appView.employee-mobile-app .employee-mobile-brand strong{font-size:10px;font-weight:600;letter-spacing:.1px} #appView.employee-mobile-app .employee-mobile-brand small{display:none} #appView.employee-mobile-app>main{min-height:calc(100dvh - 145px);padding:12px 15px 18px} #appView.employee-mobile-app #employeeAppHome .employee-home-greeting, #appView.employee-mobile-app #employeeAppHome .employee-notice-shortcut, #appView.employee-mobile-app #employeeAppHome .employee-section-title, #appView.employee-mobile-app #employeeAppHome .employee-recent-list{display:none!important} #appView.employee-mobile-app #employeeAppHome .employee-current-time{min-height:111px;margin:2px 0 13px;padding:13px 12px 11px;border-radius:15px;box-shadow:0 7px 18px #087aa623} #appView.employee-mobile-app #employeeAppHome .time-caption{font-size:11px} #appView.employee-mobile-app #employeeAppHome .employee-big-clock{margin:1px 0;font-size:35px;line-height:1.15} #appView.employee-mobile-app #employeeAppHome .employee-date-line{font-size:10px} #appView.employee-mobile-app #employeeAppHome .employee-action-grid{grid-template-columns:minmax(0,1.7fr) minmax(78px,.82fr);gap:10px;margin:0 0 13px} #appView.employee-mobile-app #employeeAppHome .employee-action-grid button{min-height:136px;justify-content:center;gap:7px;padding:10px 6px;border-radius:14px} #appView.employee-mobile-app #employeeAppHome .employee-action-grid .employee-primary-action{grid-column:1;grid-row:1;background:linear-gradient(145deg,#119e6d,#078b60)} #appView.employee-mobile-app #employeeAppHome .employee-action-grid .employee-secondary-action{grid-column:2;grid-row:1;background:linear-gradient(145deg,#f2f8ff,#e6f1fc);border-color:#d6e7f5;color:#136fb0} #appView.employee-mobile-app #employeeAppHome .employee-action-grid .action-symbol{width:42px;height:42px;font-size:23px} #appView.employee-mobile-app #employeeAppHome .employee-action-grid strong{font-size:12px;line-height:1.45} #appView.employee-mobile-app #employeeAppHome .employee-action-grid small{max-width:100%;font-size:8px;line-height:1.4} #appView.employee-mobile-app #employeeAppHome .employee-secondary-action small{font-size:7px} #appView.employee-mobile-app #employeeAppHome .employee-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0} #appView.employee-mobile-app #employeeAppHome .employee-stat-card{min-height:103px;padding:9px 5px;border-radius:11px;box-shadow:0 3px 12px #173f7209} #appView.employee-mobile-app #employeeAppHome .employee-stat-card>span{width:31px;height:31px;margin:0 auto 5px;font-size:16px} #appView.employee-mobile-app #employeeAppHome .employee-stat-card small{font-size:9px} #appView.employee-mobile-app #employeeAppHome .employee-stat-card b{margin-top:1px;font-size:18px;line-height:1.2} #appView.employee-mobile-app #employeeAppHome .employee-stat-card em{margin-top:3px;font-size:8px} #appView.employee-mobile-app .employee-bottom-nav{min-height:calc(57px + env(safe-area-inset-bottom));padding-top:4px} #appView.employee-mobile-app .employee-bottom-nav{direction:ltr} } /* v133 final mobile overrides: keep these after the compact home-screen rules. */ @media screen and (max-width:760px){ #appView.employee-mobile-app>.employee-mobile-header{grid-template-rows:44px 29px!important;min-height:84px!important;padding-top:calc(6px + env(safe-area-inset-top))!important;padding-bottom:7px!important} #appView.employee-mobile-app .employee-mobile-user strong{max-width:170px!important;font-size:14px!important;font-weight:800!important;line-height:1.35!important} #appView.employee-mobile-app .employee-mobile-user small{font-size:11px!important;line-height:1.3!important} #appView.employee-mobile-app .employee-mobile-brand strong{font-size:14px!important;font-weight:800!important;line-height:1.4!important;letter-spacing:0!important} #appView.employee-mobile-app .employee-mobile-brand small{display:block!important;font-size:10px!important;color:#d8ebf7!important} #appView.employee-mobile-app .employee-mobile-bell{width:42px!important;height:42px!important;color:#fff!important;background:#ffffff24!important} #appView.employee-mobile-app .employee-bottom-nav button small{font-size:10px!important;font-weight:650!important} #appView.employee-mobile-app .employee-bottom-nav button>span{font-size:23px!important} #appView.employee-mobile-app #employeeAppHome .employee-action-grid .employee-primary-action{background:linear-gradient(140deg,#1689e6,#075cb8)!important;border-color:#075cb8!important;box-shadow:0 8px 20px #0874cf35!important;color:#fff!important} #appView.employee-mobile-app #employeeAppHome .employee-action-grid .employee-primary-action .action-symbol{background:#ffffff24!important;color:#fff!important} #appView.employee-mobile-app #employeeAppHome .employee-action-grid .employee-secondary-action{background:linear-gradient(145deg,#0c8eb0,#08749a)!important;border-color:#08749a!important;color:#fff!important;box-shadow:0 7px 18px #087b9b30!important} #appView.employee-mobile-app #employeeAppHome .employee-action-grid .employee-secondary-action .action-symbol{background:#ffffff24!important;color:#fff!important} #appView.employee-mobile-app #employeeAppHome .employee-action-grid strong{font-size:14px!important;font-weight:850!important} #appView.employee-mobile-app #employeeAppHome .employee-action-grid small{font-size:10px!important;color:#eaf6ff!important} } /* v135: profile photo controls, inline punch feedback, and clear action colors. */ @media screen and (max-width:760px){ .employee-mobile-brand small{display:none!important} #appView.employee-mobile-app #employeeAppHome .employee-action-grid .employee-primary-action{background:linear-gradient(140deg,#13a86f,#078754)!important;border-color:#078754!important;color:#fff!important} #appView.employee-mobile-app #employeeAppHome .employee-action-grid .employee-secondary-action{background:linear-gradient(140deg,#ed5353,#d93434)!important;border-color:#d93434!important;color:#fff!important} #appView.employee-mobile-app #employeeAppHome .employee-action-grid .employee-primary-action .action-symbol,#appView.employee-mobile-app #employeeAppHome .employee-action-grid .employee-secondary-action .action-symbol{background:#ffffff25!important;color:#fff!important} #appView.employee-mobile-app #employeeAppHome .employee-action-grid button:disabled{opacity:.65;filter:saturate(.6)} .employee-home-punch-feedback{display:none;margin:-2px 0 13px;padding:11px 13px;border:1px solid #dce8f2;border-radius:11px;background:#f4f8fc;color:#35556f;font-size:12px;font-weight:650;line-height:1.7;text-align:center} .employee-home-punch-feedback.is-pending,.employee-home-punch-feedback.is-success,.employee-home-punch-feedback.is-error{display:block} .employee-home-punch-feedback.is-pending{background:#edf5fc;border-color:#cfe1f0;color:#1d5f92} .employee-home-punch-feedback.is-success{background:#e8f7ef;border-color:#bfe5ce;color:#167148} .employee-home-punch-feedback.is-error{background:#fff0f0;border-color:#f1caca;color:#aa3030} .employee-profile-large-avatar img,.employee-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit} .employee-profile-large-avatar img{position:absolute;inset:0} .employee-profile-large-avatar{position:relative;overflow:hidden} .employee-photo-upload{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:10px;padding:8px 13px;border:1px solid #b8d7ef;border-radius:10px;background:#edf6ff;color:#1769a5;font-size:11px;font-weight:750;cursor:pointer} .employee-photo-upload input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0} .employee-photo-upload small{color:#627f98;font-size:9px;font-weight:500} } /* v138: make the employee name easy to read in the phone header. */ @media screen and (max-width:760px){ #appView.employee-mobile-app .employee-mobile-user strong{max-width:180px!important;font-size:16px!important;font-weight:850!important;line-height:1.35!important} #appView.employee-mobile-app .employee-mobile-user small{font-size:12px!important} } /* v139: full-screen blue/green mobile login with the company logo centered. */ @media screen and (max-width:760px){ #loginView.login-shell{background:linear-gradient(145deg,#075493 0%,#0879ad 52%,#11966e 100%)!important} .mobile-login-intro:not([hidden]){background:transparent!important;color:#fff!important} .mobile-login-brand{background:transparent!important;box-shadow:none!important;border-bottom:1px solid #ffffff35!important} .mobile-login-brand strong,.mobile-login-brand small{color:#fff!important} .login-welcome-copy h1,.login-welcome-copy p{color:#fff!important} .mobile-login-centered-logo{display:block;width:clamp(125px,38vw,175px);height:clamp(125px,38vw,175px);min-height:0;flex:0 0 auto;align-self:center;object-fit:contain;margin:clamp(16px,5vh,38px) auto;filter:drop-shadow(0 8px 18px #00385450)} #loginView .mobile-login-intro #loginForm label{color:#fff!important} #loginView .mobile-login-intro #loginForm>button.primary{background:linear-gradient(105deg,#0b75c2,#119768)!important;box-shadow:0 7px 18px #003d5645!important} } @media screen and (max-width:760px) and (max-height:650px){ .mobile-login-centered-logo{width:clamp(105px,30vw,135px);height:clamp(105px,30vw,135px);margin:10px auto} } /* v141: constrain the mobile application to the device viewport and scroll inside its content. */ @media screen and (max-width:760px){ html,body{width:100%;height:100%;min-height:0;max-width:100%;overflow:hidden!important;overscroll-behavior:none} #appView.employee-mobile-app{display:flex!important;flex-direction:column!important;width:100%;height:100vh;height:100dvh;min-height:0!important;max-height:100dvh;overflow:hidden!important;padding:0!important;box-sizing:border-box} #appView.employee-mobile-app>.employee-mobile-header{position:relative!important;top:auto!important;flex:0 0 auto;max-width:100%;box-sizing:border-box} #appView.employee-mobile-app>main{display:block;flex:1 1 auto;width:100%;height:auto!important;min-height:0!important;max-height:none;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;box-sizing:border-box;padding-bottom:calc(88px + env(safe-area-inset-bottom))!important;-webkit-overflow-scrolling:touch} #appView.employee-mobile-app .employee-bottom-nav{position:fixed;right:0;bottom:0;left:0;max-width:100%;box-sizing:border-box;padding-bottom:calc(5px + env(safe-area-inset-bottom))} #loginView.login-shell{width:100%;height:100vh;height:100dvh;min-height:0;max-height:100dvh;overflow:hidden} .mobile-login-intro:not([hidden]){height:100vh;height:100dvh;min-height:0;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain} } /* v142: preserve and clearly show the saved employee photo in the phone header. */ @media screen and (max-width:760px){ #appView.employee-mobile-app .employee-mobile-user .employee-avatar{position:relative;display:grid;place-items:center;width:44px!important;height:44px!important;min-width:44px;min-height:44px!important;flex:0 0 44px!important;padding:0!important;overflow:hidden;border:2px solid #ffffffb8!important;border-radius:50%!important;line-height:0;font-size:0} #appView.employee-mobile-app .employee-mobile-user .employee-avatar img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:50%} #appView.employee-mobile-app .employee-profile-large-avatar{overflow:hidden} #appView.employee-mobile-app .employee-profile-large-avatar img{object-fit:cover} } /* v143: mobile attendance map links. */ @media screen and (max-width:760px){.employee-row-maps{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px 8px}.employee-row-maps .attendance-map-link{font-size:9px;padding:2px 0}} /* v146: readable employee attendance history in the Android WebView. */ @media screen and (max-width:760px){ #appView.employee-mobile-app #employeeAppRecords .employee-report-stats>div{min-height:74px;padding:11px 7px;gap:4px} #appView.employee-mobile-app #employeeAppRecords .employee-report-stats b{font-size:20px} #appView.employee-mobile-app #employeeAppRecords .employee-report-stats span{font-size:11px} #appView.employee-mobile-app #employeeAppRecords .employee-record-list{overflow:visible} #appView.employee-mobile-app #employeeAppRecords .employee-recent-row{gap:9px;padding:14px 13px} #appView.employee-mobile-app #employeeAppRecords .employee-row-date{font-size:14px;line-height:1.55} #appView.employee-mobile-app #employeeAppRecords .employee-row-date small{font-size:11px;line-height:1.5} #appView.employee-mobile-app #employeeAppRecords .employee-row-times{font-size:12px;line-height:1.5} #appView.employee-mobile-app #employeeAppRecords .employee-row-state{padding:4px 10px;font-size:11px} #appView.employee-mobile-app #employeeAppRecords .employee-row-maps .attendance-map-link{font-size:10px} #appView.employee-mobile-app #employeeAppSchedule #employeeCalendarDayDetails .employee-recent-row{gap:8px;padding:12px 13px} #appView.employee-mobile-app #employeeAppSchedule #employeeCalendarDayDetails .employee-row-date{font-size:12px} #appView.employee-mobile-app #employeeAppSchedule #employeeCalendarDayDetails .employee-row-date small{font-size:10px} #appView.employee-mobile-app #employeeAppSchedule #employeeCalendarDayDetails .employee-row-times{font-size:11px} #appView.employee-mobile-app #employeeAppSchedule #employeeCalendarDayDetails .employee-row-state{font-size:10px} } /* FINAL MOBILE LOGIN REFERENCE - presentation only. Do not change authentication. */ @media screen and (max-width:760px){ html,body{width:100%;max-width:100%;overflow-x:hidden;background:#fff!important} #mobileLoginIntro{display:none!important;height:0!important;min-height:0!important;visibility:hidden!important;pointer-events:none!important} #loginView.login-shell{ display:flex!important; width:100%!important; min-width:0!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; padding:16px 16px calc(16px + env(safe-area-inset-bottom))!important; margin:0!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; background:linear-gradient(145deg,#f7fbff 0%,#eef8f4 100%)!important; } #loginForm.login-card{ display:block!important; width:min(100%,430px)!important; max-width:430px!important; max-height:calc(100dvh - 32px)!important; min-height:0!important; margin:0!important; padding:26px 22px 24px!important; overflow:auto!important; border:0!important; border-top:0!important; border-radius:26px!important; background:rgba(255,255,255,.98)!important; box-shadow:0 18px 55px rgba(23,63,114,.14)!important; text-align:right!important; } #loginForm.login-card>img{ display:block!important; width:120px!important; height:120px!important; margin:0 auto 14px!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; object-fit:contain!important; } #loginForm.login-card h1{ margin:0!important; text-align:center!important; color:#123f73!important; line-height:1.2!important; } #loginForm.login-card .portal-title-desktop{display:none!important} #loginForm.login-card .portal-title-mobile{ display:block!important; font-size:29px!important; font-weight:900!important; color:#123f73!important; } #loginForm.login-card .portal-subtitle{ display:block!important; margin-top:8px!important; font-size:18px!important; font-weight:600!important; color:#6d7d8e!important; } #loginForm.login-card .mobile-login-description{ margin:7px 0 20px!important; color:#6d7d8e!important; font-size:13px!important; text-align:center!important; } #loginForm.login-card label:not(.remember-credentials){ display:block!important; margin:0 0 14px!important; color:#4e5f70!important; font-size:13px!important; font-weight:700!important; text-align:right!important; } #loginForm.login-card label:not(.remember-credentials)>span{ display:block!important; margin:0 0 7px!important; color:#4e5f70!important; font-size:13px!important; font-weight:700!important; } #loginForm.login-card input:not([type=checkbox]){ display:block!important; width:100%!important; height:54px!important; min-height:54px!important; padding:0 15px!important; border:1px solid #dfe6ed!important; border-radius:14px!important; background:#f5f6f7!important; color:#203548!important; font-size:16px!important; text-align:right!important; direction:rtl!important; box-shadow:none!important; } #loginForm.login-card input:not([type=checkbox]):focus{ border-color:#7bbf33!important; background:#fff!important; box-shadow:0 0 0 3px rgba(123,191,51,.12)!important; } #loginForm.login-card input::placeholder{color:#7a8189!important;font-size:15px!important} #loginForm.login-card .remember-credentials{ display:flex!important; align-items:center!important; gap:10px!important; margin:2px 0 20px!important; padding:0!important; color:#343b43!important; font-size:14px!important; font-weight:500!important; text-align:right!important; } #loginForm.login-card .remember-credentials[hidden]{display:flex!important} #loginForm.login-card .remember-credentials input[type=checkbox]{ width:22px!important;height:22px!important;min-height:22px!important; margin:0!important;padding:0!important;accent-color:#74be1c!important; } #loginForm.login-card .remember-credentials span{margin:0!important;color:#343b43!important;font-size:14px!important;font-weight:500!important} #loginForm.login-card>button.primary{ display:flex!important; width:100%!important; height:54px!important; min-height:54px!important; margin:0!important; padding:0 14px!important; border:0!important; border-radius:8px!important; background:#75c516!important; color:#fff!important; font-size:18px!important; font-weight:500!important; box-shadow:none!important; } #loginForm.login-card>button.primary span{display:none!important} #loginForm.login-card .mobile-login-back{display:none!important} #loginForm.login-card .error{margin:10px 0 0!important;font-size:12px!important;text-align:center!important} } @media screen and (max-width:760px) and (max-height:700px){ #loginForm.login-card{padding:18px 18px 18px!important;border-radius:22px!important} #loginForm.login-card>img{width:92px!important;height:92px!important;margin-bottom:9px!important} #loginForm.login-card .portal-title-mobile{font-size:25px!important} #loginForm.login-card .portal-subtitle{font-size:16px!important;margin-top:5px!important} #loginForm.login-card .mobile-login-description{margin:5px 0 13px!important;font-size:12px!important} #loginForm.login-card label:not(.remember-credentials){margin-bottom:10px!important} #loginForm.login-card input:not([type=checkbox]){height:48px!important;min-height:48px!important} #loginForm.login-card .remember-credentials{margin-bottom:13px!important} #loginForm.login-card>button.primary{height:48px!important;min-height:48px!important} } \n\n/* ============================================================\n FINAL MOBILE LOGIN DESIGN\n Visual-only layer for phones. Desktop login remains unchanged.\n Authentication/API/session code is not modified here.\n ============================================================ */\n@media (max-width:760px){\n html,body{\n min-height:100%;\n background:#f7fbff;\n }\n body{\n overflow-x:hidden;\n }\n #loginView.login-shell{\n position:relative;\n display:flex!important;\n flex-direction:column;\n align-items:stretch;\n justify-content:flex-start;\n width:100%;\n min-height:100dvh;\n height:auto;\n padding:0;\n overflow-x:hidden;\n overflow-y:auto;\n background:\n radial-gradient(ellipse at 50% 16%,rgba(255,255,255,.98) 0 23%,rgba(238,249,255,.94) 43%,transparent 64%),\n linear-gradient(180deg,#eef9ff 0%,#ffffff 44%,#ffffff 78%,#effaff 100%);\n direction:rtl;\n }\n #loginView.login-shell::before,\n #loginView.login-shell::after{\n content:"";\n position:absolute;\n left:-18%;\n width:136%;\n pointer-events:none;\n z-index:0;\n border-radius:50%;\n transform:rotate(-5deg);\n }\n #loginView.login-shell::before{\n top:190px;\n height:120px;\n background:linear-gradient(90deg,rgba(45,181,238,.16),rgba(33,145,205,.35),rgba(93,211,99,.20));\n box-shadow:0 30px 0 rgba(42,169,218,.12),0 58px 0 rgba(85,196,93,.12);\n }\n #loginView.login-shell::after{\n bottom:-70px;\n height:150px;\n background:linear-gradient(90deg,rgba(31,171,220,.12),rgba(55,197,94,.18),rgba(4,112,190,.20));\n }\n #mobileLoginIntro{display:none!important;}\n #loginForm.login-card{\n position:relative;\n z-index:2;\n display:block;\n width:calc(100% - 28px);\n max-width:460px;\n min-height:0;\n margin:0 auto;\n padding:calc(26px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));\n border:0;\n border-radius:0;\n background:transparent;\n box-shadow:none;\n overflow:visible;\n text-align:right;\n }\n #loginForm.login-card .mobile-login-back{display:none!important;}\n #loginForm.login-card>img{\n display:block;\n width:min(190px,47vw);\n height:auto;\n max-height:175px;\n margin:0 auto 6px;\n padding:0;\n border:0;\n border-radius:0;\n background:transparent;\n object-fit:contain;\n filter:drop-shadow(0 9px 15px rgba(23,75,112,.10));\n }\n #loginForm.login-card h1{\n margin:2px 0 0;\n text-align:center;\n color:#123e73;\n line-height:1.16;\n }\n #loginForm.login-card .portal-title-desktop{display:none!important;}\n #loginForm.login-card .portal-title-mobile{\n display:block!important;\n font-size:clamp(28px,7.6vw,39px);\n font-weight:900;\n letter-spacing:-.5px;\n }\n #loginForm.login-card .portal-subtitle{\n display:block!important;\n margin-top:8px;\n color:#65768c;\n font-size:clamp(17px,4.4vw,22px);\n font-weight:500;\n }\n #loginForm.login-card .mobile-login-description{\n margin:5px 0 22px;\n color:#77879b;\n font-size:12px;\n text-align:center;\n }\n #loginForm.login-card label:not(.remember-credentials){\n display:block;\n margin:0 0 13px;\n color:#385570;\n font-size:13px;\n font-weight:800;\n }\n #loginForm.login-card label:not(.remember-credentials)>span{\n display:block;\n margin:0 4px 7px;\n color:#385570;\n font-size:13px;\n font-weight:800;\n }\n #loginForm.login-card input:not([type="checkbox"]){\n box-sizing:border-box;\n width:100%;\n min-height:55px;\n padding:12px 17px;\n border:1.5px solid #d4e2ee;\n border-radius:16px;\n background:rgba(255,255,255,.97);\n color:#173e63;\n font-size:16px;\n font-weight:600;\n direction:rtl;\n text-align:right;\n box-shadow:0 6px 20px rgba(25,74,111,.05);\n }\n #loginForm.login-card input:not([type="checkbox"]):focus{\n border-color:#167fbe;\n outline:none;\n box-shadow:0 0 0 4px rgba(22,127,190,.10),0 7px 20px rgba(25,74,111,.06);\n }\n #loginForm.login-card input::placeholder{color:#8c9aaa;font-weight:400;}\n .mobile-password-wrap{position:relative;}\n .mobile-password-wrap input{padding-left:55px!important;}\n .mobile-password-toggle{\n position:absolute;\n left:9px;\n top:50%;\n transform:translateY(-50%);\n width:38px;\n height:38px;\n border:0;\n border-radius:11px;\n background:#edf5ff;\n color:#23608e;\n font-size:18px;\n cursor:pointer;\n }\n .mobile-login-options{\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:10px;\n min-height:32px;\n margin:4px 2px 15px;\n }\n #loginForm.login-card .remember-credentials{\n display:flex!important;\n align-items:center;\n gap:8px;\n margin:0!important;\n padding:0!important;\n color:#294b67;\n font-size:13px;\n font-weight:600;\n cursor:pointer;\n }\n #loginForm.login-card .remember-credentials[hidden]{display:flex!important;}\n #loginForm.login-card .remember-credentials input[type="checkbox"]{\n appearance:none;\n width:20px;\n height:20px;\n margin:0;\n border:1.7px solid #8ca3b7;\n border-radius:5px;\n background:#fff;\n cursor:pointer;\n position:relative;\n }\n #loginForm.login-card .remember-credentials input[type="checkbox"]:checked{\n border-color:#167fbe;\n background:#167fbe;\n }\n #loginForm.login-card .remember-credentials input[type="checkbox"]:checked::after{\n content:"✓";\n position:absolute;\n inset:0;\n display:grid;\n place-items:center;\n color:#fff;\n font-size:14px;\n font-weight:900;\n }\n .mobile-forgot{\n border:0;\n background:transparent;\n padding:3px 0;\n color:#0875d1;\n font-size:13px;\n font-weight:700;\n cursor:pointer;\n }\n #loginForm.login-card>button.primary{\n width:100%;\n min-height:58px;\n margin:0;\n display:flex;\n align-items:center;\n justify-content:center;\n gap:13px;\n border:0;\n border-radius:17px;\n background:linear-gradient(100deg,#1ac878 0%,#0aa6a1 42%,#0877ca 100%);\n color:#fff;\n font-size:20px;\n font-weight:900;\n box-shadow:0 12px 25px rgba(9,127,174,.20);\n cursor:pointer;\n }\n #loginForm.login-card>button.primary span{display:inline-block;font-size:25px;}\n #loginForm.login-card .error{\n min-height:18px;\n margin:9px 2px 0;\n color:#b42318;\n font-size:11px;\n text-align:center;\n }\n .mobile-login-features{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:8px;\n margin:22px 0 0;\n padding:0 2px;\n }\n .mobile-login-features>div{\n position:relative;\n display:flex;\n flex-direction:column;\n align-items:center;\n text-align:center;\n padding:0 5px;\n }\n .mobile-login-features>div+div::before{\n content:"";\n position:absolute;\n right:0;\n top:8px;\n height:48px;\n border-right:1px solid #d7e6ef;\n }\n .mobile-login-features b{\n display:grid;\n place-items:center;\n width:46px;\n height:46px;\n margin-bottom:6px;\n border-radius:50%;\n background:linear-gradient(135deg,#e8f8e8,#e8f4ff);\n color:#168d66;\n font-size:22px;\n }\n .mobile-login-features strong{color:#123e73;font-size:12px;}\n .mobile-login-features small{margin-top:3px;color:#718398;font-size:9px;}\n}\n\n@media (max-width:380px){\n #loginForm.login-card{padding-top:calc(17px + env(safe-area-inset-top));}\n #loginForm.login-card>img{width:145px;max-height:135px;}\n #loginForm.login-card .portal-title-mobile{font-size:29px;}\n #loginForm.login-card .portal-subtitle{font-size:16px;}\n #loginForm.login-card .mobile-login-description{margin-bottom:15px;}\n #loginForm.login-card input:not([type="checkbox"]){min-height:50px;}\n #loginForm.login-card>button.primary{min-height:53px;font-size:18px;}\n .mobile-login-features{margin-top:17px;}\n .mobile-login-features b{width:40px;height:40px;font-size:18px;}\n .mobile-login-features strong{font-size:11px;}\n .mobile-login-features small{font-size:8px;}\n}\n /* Keep new mobile-only presentation controls invisible on desktop. */ @media (min-width:761px){ .mobile-login-options,.mobile-login-features,.mobile-password-toggle,.mobile-forgot{display:none!important;} } /* FINAL VISIBILITY FIX: authentication state always wins over mobile display rules. */ #loginView.login-shell.hidden{display:none!important;visibility:hidden!important;pointer-events:none!important} #loginForm.login-card.hidden{display:none!important;visibility:hidden!important;pointer-events:none!important} #appView.hidden{display:none!important;visibility:hidden!important;pointer-events:none!important} /* FINAL VISIBILITY FIX: authentication state controls the whole login layer. This must override mobile presentation rules that use display:flex!important. */ #loginView.hidden, #loginView[hidden]{ display:none!important; visibility:hidden!important; pointer-events:none!important; } #appView.hidden, #appView[hidden]{ display:none!important; visibility:hidden!important; pointer-events:none!important; } /* AUTH STATE HARD GUARD v2 */ #loginView[hidden],#loginView.hidden{display:none!important;visibility:hidden!important;pointer-events:none!important;} #appView[hidden],#appView.hidden{display:none!important;visibility:hidden!important;pointer-events:none!important;} /* ============================================================ MOBILE LOGIN DARK THEME - REAL FINAL OVERRIDE UI ONLY. Authentication/API/session are untouched. ============================================================ */ @media screen and (max-width:760px){ #loginView.login-shell{ background:#0F1F1C!important; color:#F2F7F5!important; min-height:100dvh!important; overflow-y:auto!important; overflow-x:hidden!important; } #loginView.login-shell::before{ top:-70px!important; left:-30%!important; width:160%!important; height:260px!important; background:radial-gradient(circle at 50% 35%,rgba(0,155,117,.25),transparent 62%)!important; box-shadow:none!important; transform:none!important; } #loginView.login-shell::after{ bottom:-120px!important; left:-30%!important; width:160%!important; height:260px!important; background:radial-gradient(circle at 50% 50%,rgba(8,126,164,.18),transparent 65%)!important; transform:none!important; } #mobileLoginIntro{display:none!important;} #loginForm.login-card{ display:block!important; width:100%!important; max-width:430px!important; min-height:100dvh!important; box-sizing:border-box!important; margin:0 auto!important; padding:28px 20px 30px!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; overflow:visible!important; direction:rtl!important; text-align:right!important; } #loginForm.login-card>img{ width:108px!important; height:108px!important; max-height:none!important; margin:0 auto 16px!important; padding:8px!important; border:0!important; border-radius:24px!important; background:#172A27!important; object-fit:contain!important; filter:none!important; } #loginForm.login-card h1{ margin:0!important; text-align:center!important; line-height:1.2!important; color:#F2F7F5!important; } #loginForm.login-card .portal-title-mobile{ display:block!important; font-size:27px!important; font-weight:800!important; color:#F2F7F5!important; } #loginForm.login-card .portal-subtitle{ display:block!important; margin-top:6px!important; font-size:15px!important; font-weight:500!important; color:#9BAFAC!important; } #loginForm.login-card .mobile-login-description{ margin:8px 0 26px!important; color:#9BAFAC!important; font-size:13px!important; text-align:center!important; } #loginForm.login-card label:not(.remember-credentials){ display:block!important; margin:0 0 13px!important; color:#DCE8E4!important; font-size:13px!important; font-weight:700!important; } #loginForm.login-card label:not(.remember-credentials)>span{ display:block!important; margin:0 3px 7px!important; color:#DCE8E4!important; font-size:13px!important; font-weight:700!important; } #loginForm.login-card input:not([type="checkbox"]){ width:100%!important; min-height:52px!important; height:52px!important; box-sizing:border-box!important; padding:12px 15px!important; border:1px solid #29423D!important; border-radius:14px!important; background:#172A27!important; color:#F2F7F5!important; font-size:15px!important; font-weight:500!important; direction:rtl!important; text-align:right!important; box-shadow:none!important; } #loginForm.login-card input:not([type="checkbox"]):focus{ border-color:#35A989!important; outline:none!important; background:#1A302C!important; box-shadow:0 0 0 3px rgba(53,169,137,.16)!important; } #loginForm.login-card input::placeholder{color:#7F9690!important;font-size:14px!important;} .mobile-password-wrap{position:relative!important;} .mobile-password-wrap input{padding-left:54px!important;} .mobile-password-toggle{ position:absolute!important; left:8px!important; top:50%!important; transform:translateY(-50%)!important; width:38px!important; height:38px!important; border:0!important; border-radius:10px!important; background:#203A35!important; color:#55B99A!important; font-size:17px!important; } .mobile-login-options{ display:flex!important; align-items:center!important; justify-content:space-between!important; margin:3px 2px 17px!important; min-height:30px!important; } #loginForm.login-card .remember-credentials, #loginForm.login-card .remember-credentials[hidden]{ display:flex!important; align-items:center!important; gap:7px!important; margin:0!important; padding:0!important; color:#B7C8C3!important; font-size:12px!important; } #loginForm.login-card .remember-credentials input[type="checkbox"]{ width:19px!important; height:19px!important; min-height:19px!important; margin:0!important; appearance:none!important; border:1px solid #49645E!important; border-radius:5px!important; background:#172A27!important; accent-color:#35A989!important; } #loginForm.login-card .remember-credentials input[type="checkbox"]:checked{ background:#35A989!important; border-color:#35A989!important; } #loginForm.login-card .remember-credentials input[type="checkbox"]:checked::after{ color:#fff!important; } .mobile-forgot{ border:0!important; background:transparent!important; color:#55B99A!important; font-size:12px!important; font-weight:700!important; padding:3px 0!important; } #loginForm.login-card>button.primary{ width:100%!important; height:52px!important; min-height:52px!important; margin:0!important; border:0!important; border-radius:14px!important; background:linear-gradient(100deg,#009B75 0%,#087EA4 100%)!important; color:#fff!important; font-size:17px!important; font-weight:800!important; box-shadow:0 10px 22px rgba(0,155,117,.18)!important; } #loginForm.login-card>button.primary span{display:inline-block!important;font-size:20px!important;} #loginForm.login-card .error{ margin:9px 0 0!important; color:#FF8F8F!important; font-size:11px!important; text-align:center!important; } /* Remove the three feature blocks from the login screen. */ #loginForm.login-card .mobile-login-features{display:none!important;} } @media screen and (max-width:380px){ #loginForm.login-card{padding:20px 17px 24px!important;} #loginForm.login-card>img{width:92px!important;height:92px!important;margin-bottom:13px!important;} #loginForm.login-card .portal-title-mobile{font-size:24px!important;} #loginForm.login-card .portal-subtitle{font-size:14px!important;} #loginForm.login-card .mobile-login-description{margin-bottom:21px!important;font-size:12px!important;} #loginForm.login-card input:not([type="checkbox"]){height:49px!important;min-height:49px!important;} #loginForm.login-card>button.primary{height:50px!important;min-height:50px!important;} } /* ============================================================ REFERENCE MOBILE LOGIN v4 Matches supplied reference image: white card, green/blue waves, large centered logo, RTL fields, green-blue login button. Presentation only. Authentication/API/session untouched. ============================================================ */ @media screen and (max-width:760px){ html,body{background:#f7fbff!important;color:#163b63!important;overflow-x:hidden!important;} #loginView.login-shell{ position:relative!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-start!important; width:100%!important; min-height:100dvh!important; height:auto!important; max-height:none!important; padding:0 0 calc(18px + env(safe-area-inset-bottom))!important; overflow-x:hidden!important; overflow-y:auto!important; direction:rtl!important; background: radial-gradient(ellipse at 50% 9%,rgba(255,255,255,.98) 0 25%,rgba(245,252,255,.96) 46%,transparent 67%), linear-gradient(180deg,#f7fbff 0%,#ffffff 48%,#f8fcff 100%)!important; } /* layered flowing waves - top */ #loginView.login-shell::before{ content:""!important; position:absolute!important; z-index:0!important; top:250px!important; left:-22%!important; width:144%!important; height:180px!important; pointer-events:none!important; border-radius:52% 48% 0 0 / 65% 65% 0 0!important; transform:rotate(-2deg)!important; background: linear-gradient(145deg,transparent 0 18%,rgba(53,191,235,.30) 18% 31%,transparent 31% 39%,rgba(89,205,90,.30) 39% 53%,transparent 53%), linear-gradient(155deg,transparent 0 30%,rgba(10,151,210,.24) 30% 44%,transparent 44% 50%,rgba(72,193,72,.25) 50% 65%,transparent 65%)!important; box-shadow:none!important; } /* layered flowing waves - bottom */ #loginView.login-shell::after{ content:""!important; position:absolute!important; z-index:0!important; left:-20%!important; bottom:-58px!important; width:140%!important; height:175px!important; pointer-events:none!important; border-radius:50% 50% 0 0 / 55% 55% 0 0!important; transform:rotate(-3deg)!important; background: linear-gradient(160deg,transparent 0 34%,rgba(109,218,80,.55) 34% 47%,transparent 47% 52%,rgba(36,174,224,.42) 52% 67%,transparent 67%), linear-gradient(160deg,transparent 0 50%,rgba(21,160,92,.55) 50% 64%,transparent 64% 70%,rgba(4,111,190,.70) 70% 88%,transparent 88%)!important; } #mobileLoginIntro{display:none!important;} #loginForm.login-card{ position:relative!important; z-index:3!important; display:block!important; width:calc(100% - 32px)!important; max-width:910px!important; min-height:0!important; margin:0 auto!important; padding:34px 24px 30px!important; border:0!important; border-radius:28px!important; background:rgba(255,255,255,.98)!important; box-shadow:0 12px 38px rgba(27,77,112,.13)!important; overflow:visible!important; text-align:right!important; } /* logo sits visually above card like reference */ #loginForm.login-card>img{ display:block!important; width:185px!important; height:185px!important; max-height:185px!important; margin:-10px auto 10px!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; object-fit:contain!important; filter:none!important; } #loginForm.login-card h1{ margin:0!important; text-align:center!important; color:#103a70!important; line-height:1.12!important; } #loginForm.login-card .portal-title-desktop{display:none!important;} #loginForm.login-card .portal-title-mobile{ display:block!important; font-size:clamp(34px,8.4vw,58px)!important; font-weight:900!important; letter-spacing:-.8px!important; } #loginForm.login-card .portal-subtitle{display:none!important;} #loginForm.login-card .mobile-login-description{ display:block!important; margin:10px 0 32px!important; color:#69798e!important; font-size:clamp(18px,4.3vw,30px)!important; font-weight:500!important; text-align:center!important; } #loginForm.login-card label:not(.remember-credentials){ display:block!important; margin:0 0 22px!important; color:#596a7e!important; font-size:17px!important; font-weight:500!important; text-align:right!important; } #loginForm.login-card label:not(.remember-credentials)>span{display:none!important;} #loginForm.login-card input:not([type="checkbox"]){ box-sizing:border-box!important; width:100%!important; height:68px!important; min-height:68px!important; padding:0 22px!important; border:2px solid #dbe5ef!important; border-radius:18px!important; background:#fff!important; color:#193f66!important; font-size:21px!important; font-weight:500!important; direction:rtl!important; text-align:right!important; box-shadow:0 2px 7px rgba(23,67,100,.025)!important; } #loginForm.login-card input::placeholder{color:#6e7b8e!important;font-size:21px!important;opacity:1!important;} #loginForm.login-card input:not([type="checkbox"]):focus{ outline:none!important; border-color:#1d8fc0!important; box-shadow:0 0 0 4px rgba(29,143,192,.10)!important; } .mobile-password-wrap{position:relative!important;} .mobile-password-wrap input{padding-left:72px!important;} .mobile-password-toggle{ position:absolute!important; left:10px!important; top:50%!important; transform:translateY(-50%)!important; width:48px!important; height:48px!important; border:0!important; border-radius:12px!important; background:transparent!important; color:#647287!important; font-size:25px!important; } .mobile-login-options{ display:flex!important; align-items:center!important; justify-content:space-between!important; min-height:40px!important; margin:2px 4px 25px!important; gap:14px!important; } #loginForm.login-card .remember-credentials{ display:flex!important; align-items:center!important; gap:10px!important; margin:0!important; color:#657184!important; font-size:18px!important; font-weight:500!important; white-space:nowrap!important; } #loginForm.login-card .remember-credentials input[type="checkbox"]{ appearance:none!important; width:27px!important; height:27px!important; min-height:27px!important; margin:0!important; border:2px solid #6f7d8f!important; border-radius:5px!important; background:#fff!important; } #loginForm.login-card .remember-credentials input[type="checkbox"]:checked{ background:#168d67!important; border-color:#168d67!important; } #loginForm.login-card .remember-credentials input[type="checkbox"]:checked::after{ content:"✓"!important; display:grid!important; place-items:center!important; width:100%!important; height:100%!important; color:#fff!important; font-size:18px!important; font-weight:900!important; } .mobile-forgot{ border:0!important; background:transparent!important; padding:4px 0!important; color:#0876d8!important; font-size:18px!important; font-weight:700!important; white-space:nowrap!important; } #loginForm.login-card>button.primary{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; height:72px!important; min-height:72px!important; margin:0!important; padding:0 20px!important; border:0!important; border-radius:18px!important; background:linear-gradient(100deg,#28ca7a 0%,#08a9ad 48%,#086cc3 100%)!important; color:#fff!important; font-size:25px!important; font-weight:800!important; box-shadow:0 12px 24px rgba(8,119,190,.18)!important; } #loginForm.login-card>button.primary span{display:inline-block!important;font-size:31px!important;} #loginForm.login-card .error{margin:12px 2px 0!important;font-size:13px!important;text-align:center!important;} .mobile-login-features{display:none!important;} #loginForm.login-card .mobile-login-back{display:none!important;} } @media screen and (max-width:480px){ #loginForm.login-card{ width:calc(100% - 28px)!important; padding:24px 20px 24px!important; border-radius:27px!important; } #loginForm.login-card>img{ width:165px!important; height:165px!important; max-height:165px!important; margin:-4px auto 8px!important; } #loginForm.login-card .portal-title-mobile{font-size:35px!important;} #loginForm.login-card .mobile-login-description{font-size:17px!important;margin-bottom:25px!important;} #loginForm.login-card input:not([type="checkbox"]){height:60px!important;min-height:60px!important;font-size:18px!important;} #loginForm.login-card input::placeholder{font-size:18px!important;} #loginForm.login-card label:not(.remember-credentials){margin-bottom:17px!important;} .mobile-login-options{margin-bottom:20px!important;} #loginForm.login-card .remember-credentials,.mobile-forgot{font-size:16px!important;} #loginForm.login-card .remember-credentials input[type="checkbox"]{width:24px!important;height:24px!important;min-height:24px!important;} #loginForm.login-card>button.primary{height:62px!important;min-height:62px!important;font-size:22px!important;border-radius:17px!important;} } @media screen and (max-width:380px){ #loginForm.login-card{width:calc(100% - 22px)!important;padding:18px 16px 20px!important;} #loginForm.login-card>img{width:135px!important;height:135px!important;max-height:135px!important;} #loginForm.login-card .portal-title-mobile{font-size:31px!important;} #loginForm.login-card .mobile-login-description{font-size:15px!important;margin-bottom:19px!important;} #loginForm.login-card input:not([type="checkbox"]){height:54px!important;min-height:54px!important;font-size:16px!important;border-radius:15px!important;} #loginForm.login-card input::placeholder{font-size:16px!important;} #loginForm.login-card label:not(.remember-credentials){margin-bottom:13px!important;} .mobile-login-options{margin-bottom:16px!important;} #loginForm.login-card .remember-credentials,.mobile-forgot{font-size:14px!important;} #loginForm.login-card>button.primary{height:56px!important;min-height:56px!important;font-size:20px!important;} }