:root{--bar-bg: #000;--bar-fg: #fff;--hub-grad-top: #010101;--hub-grad-bottom: #115596;--primary: #007bc2;--primary-pressed: #006bb3;--navy: #1a354c;--icon-blue: #0d7cc1;--accent-orange: #f79422;--today-dot: #f15f28;--link-light: #50a0d8;--bg: #fff;--bg-subtle: #f3f3f3;--bg-pale-blue: #d9e6f2;--header-flat: #90b0cf;--text: #333;--text-strong: #000;--text-info: #505c75;--text-table: #4c4c4c;--text-muted: #6d6e70;--text-label: #6b6e70;--text-disabled: #9d9fa2;--hint: #bdbec0;--divider: #ccc;--fieldset-border: rgba(102, 102, 102, .25);--row-pressed: #e5f3fb;--error: #cf0c0e;--error-bright: #e00;--error-on-dark: #ffb328;--success: #5eb235;--reject: #af1422;--punch-indigo: #262261;--loc-off: #4184be;--switch-on: #80cbc4;--switch-off: #9e9e9e;--tc-exception: #c0272d;--tc-excused: #0000ff;--tc-phantom: #6d3d8f;--tc-phantom-ro: #8e6bad;--tc-mgr: #fef9cc;--tc-emp: #fef0d7;--tc-both: #eaf3e3;--tc-signed: #e8e8e8;--req-approved: #6ebd44;--req-refused: #c0272d;--req-pending: #6e3e8f;--req-submitted: #e0a800;--bar-h: 52px;--row-min: 52px;--footer-h: 48px;font-family:Roboto,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--hub-grad-top);overscroll-behavior-y:none}#app{max-width:640px;margin:0 auto;height:100%;min-height:100dvh;position:relative;background:var(--bg)}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}button:disabled{cursor:default}input,select,textarea{font:inherit}.screen{display:flex;flex-direction:column;height:100dvh;background:var(--bg)}.screen.hub{background:linear-gradient(var(--hub-grad-top),var(--hub-grad-bottom));color:#fff}.screen>.content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative}.actionbar{flex:none;height:var(--bar-h);display:flex;align-items:center;background:var(--bar-bg);color:var(--bar-fg);padding:0 4px;gap:2px;padding-top:env(safe-area-inset-top)}.actionbar.transparent{background:transparent}.actionbar .title{flex:1;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:8px}.actionbar .title small{display:block;font-size:13px;opacity:.8}.actionbar .brand{font-weight:700;font-size:17px;padding-left:10px;letter-spacing:.02em}.actionbar .who{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:12px;opacity:.9}.icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}.icon-btn:active{background:rgba(255,255,255,.18)}.icon-btn:disabled{opacity:.35}.menu-backdrop{position:fixed;inset:0;z-index:40}.menu{position:absolute;right:6px;top:calc(var(--bar-h) - 4px);z-index:41;min-width:180px;background:#fff;color:var(--text-strong);border-radius:2px;box-shadow:0 4px 16px #00000059;padding:6px 0}.menu button{display:block;width:100%;text-align:left;padding:12px 18px;font-size:16px}.menu button:active{background:var(--row-pressed)}.list{list-style:none;margin:0;padding:0}.row{display:flex;align-items:center;gap:12px;min-height:var(--row-min);padding:6px 12px;border-bottom:1px solid var(--divider);width:100%;text-align:left}button.row:active,.row.tap:active{background:var(--row-pressed)}.row .main{flex:1;min-width:0}.row .t{font-weight:700;font-size:17px;color:var(--text-strong)}.row .s{font-size:15px;color:var(--text-info)}.row .err{font-size:15px;color:var(--error-bright)}.sep-bar{background:var(--primary);color:#fff;font-weight:700;font-size:17px;padding:4px 10px;display:flex;align-items:center;gap:8px}.sep-bar .today{margin-left:auto;font-size:15px}.dot{width:10px;height:10px;border-radius:50%;background:var(--today-dot);display:inline-block;flex:none}.empty{text-align:center;color:var(--text-info);font-size:16px;padding:40px 20px}.page{padding:8px}.fieldset{background:#fff;border:1px solid var(--fieldset-border);border-radius:10px;overflow:hidden;margin:8px 0}.field{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--row-min);padding:6px 12px 6px 16px;border-bottom:1px solid var(--fieldset-border);width:100%;text-align:left}.field:last-child{border-bottom:0}.field>.l{font-weight:700;font-size:17px;color:var(--text-strong);flex:none}.field>.v{font-size:17px;color:var(--text-info);text-align:right;min-width:0;overflow-wrap:anywhere}.field.stack{flex-direction:column;align-items:stretch}.field input,.field select,.field textarea{font-size:17px;color:var(--text-info);border:0;background:transparent;text-align:right;min-width:0;flex:1;padding:4px 0}.field select{text-align-last:right;appearance:none;-webkit-appearance:none;padding-right:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236d6e70' stroke-width='2'/%3E%3C/svg%3E") right center no-repeat}.field textarea{text-align:left;min-height:80px;resize:vertical;border:1px solid var(--divider);border-radius:4px;padding:6px}.field .invalid{color:var(--error)}.footer{flex:none;min-height:var(--footer-h);display:flex;align-items:center;gap:16px;padding:0 20px;border-top:1px solid var(--text-muted);background:#fff;padding-bottom:env(safe-area-inset-bottom)}.footer .spacer{flex:1}.footer .tbtn{color:var(--navy);font-size:18px;font-weight:500;padding:10px 4px}.footer .tbtn.secondary{font-weight:300}.footer .tbtn:disabled{color:var(--text-disabled)}.footer .ibtn{color:var(--navy)}.footer .label{color:var(--text-muted);font-size:16px}.busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none}.busy .box{background:rgba(0,0,0,.73);border:1px solid #8a8a8a;border-radius:3px;padding:16px;color:#fff}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}.dialog{background:#fff;color:var(--text-strong);border-radius:4px;width:100%;max-width:360px;box-shadow:0 8px 32px #0006}.dialog h2{margin:0;padding:18px 20px 6px;font-size:19px;font-weight:500}.dialog .body{padding:8px 20px 12px;font-size:16px;color:var(--text)}.dialog .actions{display:flex;justify-content:flex-end;gap:8px;padding:4px 8px 8px}.dialog .actions button{color:var(--primary);font-weight:500;font-size:16px;padding:10px 12px;text-transform:uppercase}.dialog .choice{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 20px;font-size:17px;text-align:left;border-top:1px solid #eee}.dialog .choice:active{background:var(--row-pressed)}.toast{position:fixed;left:50%;bottom:72px;transform:translate(-50%);background:rgba(40,40,40,.92);color:#fff;padding:10px 18px;border-radius:20px;font-size:15px;z-index:60;max-width:90vw}.link{color:var(--primary);font-weight:700;font-size:17px}.status-icon{flex:none}.muted{color:var(--text-muted)}.switch{position:relative;width:44px;height:22px;flex:none}.switch input{opacity:0;width:0;height:0;position:absolute}.switch span{position:absolute;inset:0;background:var(--switch-off);border-radius:11px;transition:.2s}.switch span:before{content:"";position:absolute;width:26px;height:26px;left:-2px;top:-2px;background:#eee;border-radius:50%;box-shadow:0 1px 3px #0006;transition:.2s}.switch input:checked+span{background:var(--switch-on)}.switch input:checked+span:before{transform:translate(22px);background:#26a69a}.logon{padding:0 20px 40px;display:flex;flex-direction:column}.logon-brand{font-size:28px;font-weight:300;text-align:center;margin:40px 0 36px;letter-spacing:.02em}.logon label{font-size:20px;margin:22px 2px 4px}.logon label:first-of-type{margin-top:0}.logon input{height:44px;border-radius:4px;border:0;padding:0 12px;font-size:18px;color:#000;background:#fff}.primary-btn{margin-top:56px;height:44px;border:1px solid #fff;border-radius:4px;background:#000;color:#fff;font-size:20px}.primary-btn:active{background:rgba(0,0,0,.55)}.primary-btn:disabled{opacity:.6}.logon-msg{min-height:56px;margin-top:16px;text-align:center;color:var(--error-on-dark);font-weight:700;font-size:17px;display:flex;justify-content:center;align-items:flex-start}.home-h{font-size:13px;font-weight:700;margin:14px 0 2px;padding-left:10px}.module{display:flex;align-items:center;width:100%;text-align:left;padding:8px 10px;color:#fff;min-height:72px}.module:active{background:rgba(255,255,255,.08)}.ring{flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.6)}.ring.hot{border-color:#fff9;border-top-color:var(--accent-orange);border-right-color:var(--accent-orange);border-width:2.5px}.ring.punch{background:var(--punch-indigo);border:2px solid #fff}.module:active .ring{background:rgba(255,255,255,.9);color:var(--navy)}.mtext{margin-left:24px;min-width:0;display:flex;flex-direction:column}.mtitle{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msub{font-size:13px;opacity:.9;margin-top:2px}.punch-map{height:150px;background:#f4f6f8;color:#d6dbe0;display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(107,107,107,.18)}.ident{display:flex;gap:10px;padding:8px;background:rgba(232,232,232,.8);margin-top:-66px;position:relative}.avatar{width:50px;height:50px;background:#b5b8bb;display:flex;align-items:flex-end;justify-content:center;flex:none}.ident-text{min-width:0}.ident-name{font-weight:700;color:var(--text-muted);font-size:16px}.ident-loc{display:flex;gap:6px;align-items:center;font-size:14px;margin-top:4px}.xfer{padding:10px 25px 0}.xfer-h{font-weight:700;font-size:16px;color:var(--text-label);height:45px;display:flex;align-items:center}.xfer-row{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;border-bottom:2px solid var(--divider);text-align:left}.xfer-row .xl{color:var(--text-label);font-size:16px;flex:none;width:70px}.xfer-row .xv{flex:1;text-align:right;color:var(--navy);font-weight:500;font-size:17px;overflow-wrap:anywhere}.xfer-row .xv.none{color:var(--divider);font-weight:400}.center-pad{display:flex;justify-content:center;padding:25px 0}.punch-result .pr-line{display:flex;align-items:center;gap:8px;font-size:15px}.punch-result .pr-ind{padding-left:26px;font-size:15px;margin-top:4px}.tc-sub{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 10px;border-bottom:1px solid var(--divider);background:#fff}.tc-period{color:var(--primary);font-weight:500;font-size:15px;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:10px 0}.tc-status,.dd-date{font-weight:500;font-size:14px;color:var(--text-muted);text-align:right}.dd-date{text-align:left;color:var(--text-strong)}.tc-sub2{flex:none;font-weight:500;font-size:14px;color:var(--text-muted);padding:6px 10px}.tc-grid{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px;color:var(--text-table)}.tc-grid th{background:var(--primary);color:#fff;font-weight:500;font-size:14px;height:40px;text-align:left;padding:0 6px;position:sticky;top:0}.tc-grid th:nth-child(1){width:17%}.tc-grid th:nth-child(2){width:25%}.tc-grid th:nth-child(3){width:17%}.tc-grid td{padding:10px 6px;border-bottom:1px solid #eee;vertical-align:top}.tc-grid tr.first td{border-top:1px solid var(--divider)}.tc-grid tr:active td{background:var(--row-pressed)}.tc-grid .ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.marks{display:flex;gap:3px;margin-top:3px;color:var(--text-muted)}.tv.exception{color:var(--tc-exception);font-weight:500}.tv.excused{color:var(--tc-excused)}.tv.phantom{color:var(--tc-phantom)}.tv.phantomReadonly{color:var(--tc-phantom-ro);font-style:italic}.missed{display:inline-block;width:24px;height:4px;background:var(--tc-exception);vertical-align:middle;border-radius:1px}.tc-cum{flex:none;display:flex;justify-content:space-between;background:var(--bg-pale-blue);padding:8px 12px;font-size:14px;box-shadow:0 -2px 3px #0000001f}.tc-thead{display:flex;justify-content:space-between;background:var(--primary);color:#fff;font-size:14px;font-weight:500;padding:10px 12px}.small{font-size:12px}.dd-h{font-size:14px;font-weight:500;color:var(--text-muted);margin:20px 0 6px}.dd-bar{display:grid;background:var(--primary);color:#fff;font-size:14px;min-height:33px;align-items:center}.dd-bar span,.dd-row span{padding:0 10px}.dd-bar.two span+span{border-left:1px solid #fff}.dd-row{display:grid;min-height:40px;align-items:center;border-bottom:1px solid var(--divider);font-size:14px;color:#485870}.two{grid-template-columns:1fr 1fr}.three{grid-template-columns:2fr 1fr 1fr}.chip{background:#eee;align-self:stretch;display:flex;align-items:center}.swatch{display:inline-block;width:28px;height:18px;border:1px solid var(--divider)}.sched-bar{flex:none;height:55px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;border-bottom:1px solid var(--divider);color:var(--navy)}.sched-bar .icon-btn:active{background:var(--row-pressed)}.sched-date{font-size:18px;font-weight:700;color:var(--navy);padding:8px 16px}.sched-side{width:32%;text-align:right;color:var(--text-muted);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl}.sched-pc{background:linear-gradient(#fefdf5,#f9f4ba)}.seg{margin:10px 0;border:1px solid var(--fieldset-border);border-radius:10px;overflow:hidden}.seg-h{display:flex;justify-content:space-between;padding:10px 14px;background:linear-gradient(#d4edf5,#e9f6f8);font-size:16px}.seg-b{padding:4px 14px 10px}.seg-f{padding:6px 0;font-size:16px;color:#000;overflow-wrap:anywhere}.seg-l{font-weight:700;color:#33629a;font-size:16px}.sr-only{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.filter-bar{flex:none;display:flex;height:55px;border-bottom:1px solid var(--divider)}.filter-bar select{flex:1;min-width:0;border:0;border-right:1px solid var(--divider);background:var(--bg);color:var(--navy);font-weight:700;font-size:15px;padding:0 28px 0 12px;text-align:left;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a354c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.filter-bar select:last-child{border-right:0}
