/* Portal additions */
.shot{position:relative;overflow:hidden;padding:0;text-decoration:none;color:inherit;display:block}
.shot img{width:100%;height:100%;object-fit:contain;display:block;border-radius:10px;background:#0a1a3a}
.shot .stamp{position:absolute;left:6px;bottom:6px;background:rgba(10,26,58,.78);color:#F2F7FB;border-radius:6px;padding:1px 7px;font-size:12px}
.shot.fail{display:flex;align-items:flex-end;padding:8px 10px}
textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.login{display:flex;align-items:center;justify-content:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Week strip (Screenshots) and clickable calendar days. The chosen day uses the same gradient as the active left-menu button. */
.wk{display:flex;align-items:center;gap:6px;margin:0 0 14px;width:100%}
.wkb{flex:1;min-width:0}
.wkm{font-size:13px;color:var(--mut);text-align:center;margin:0 0 4px}
.wkd{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.wkn{flex:none;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--fg);font:400 18px/1 var(--serif);display:grid;place-items:center;padding:0 0 2px;cursor:pointer}
.wkn:hover:not(:disabled){background:var(--hover)}
.wkn:disabled{opacity:.3;cursor:default}
.wday{display:flex;flex-direction:column;align-items:center;gap:1px;border:1px solid transparent;background:transparent;border-radius:100px;padding:4px 0;color:var(--fg);font:inherit;cursor:pointer;min-width:0}
.wday span{font-size:11px;color:var(--mut)}
.wday b{font:500 16px/1.1 var(--serif)}
.wday:hover:not(:disabled):not(.on){background:var(--hover)}
.wday.today{border-color:var(--fg)}
.wday.on{background-image:linear-gradient(90deg,#DDFF54,#002233);border-color:transparent;opacity:1}
.wday.on span,.wday.on b{color:#fff}
.wday.on b.worked{color:#fff!important}
.wday:disabled{cursor:default}
.wday.later,.pday.later{opacity:.35}
/* Desktop day picker: previous/next day and a month calendar pop-up. The week strip is for phones only. */
.wk.mob{display:none}
.dnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dpick{position:relative}
.datebtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:100px;padding:6px 16px;font:500 15px/1.2 var(--sans);cursor:pointer}
.datebtn:hover,.datebtn[aria-expanded="true"]{background:var(--hover)}
.calpop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:20;width:290px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 12px 32px rgba(10,26,58,.18)}
.cph{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font:500 16px/1 var(--serif)}
.cpg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cpg>span{font-size:11px;color:var(--mut);padding:2px 0 4px}
.pday{border:1px solid transparent;background:transparent;border-radius:50%;aspect-ratio:1;color:var(--fg);font:inherit;cursor:pointer;padding:0}
.pday b{font:500 14px/1 var(--sans)}
.pday:hover:not(:disabled):not(.on){background:var(--hover)}
.pday.today{border-color:var(--fg)}
.pday.on{background-image:linear-gradient(90deg,#DDFF54,#002233);border-color:transparent;opacity:1}
.pday.on b{color:#fff;font-weight:700}
.pday.on b.worked{color:#fff!important}
.pday:disabled{cursor:default}
@media (max-width:760px){.wk.mob{display:flex}.dnav.desk,.dnfld.desk{display:none}}
b.worked{color:#1E63D6}
.wday:disabled{opacity:.3;cursor:default}
b.worked{color:var(--worked)!important;font-weight:700}
.cal .cd{cursor:pointer}
.cal .cd:hover{background:var(--hover)}
.cal .cd.sel{border-color:transparent;background-image:linear-gradient(90deg,#DDFF54,#002233);color:#fff}
.cal .cd.sel b{color:#fff}
.cal .cd.sel b.worked{color:#fff!important}
.dp{margin:14px 0}
.dph{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dph h3{font:500 22px/1.2 var(--serif);margin:0}
.dpg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:12px}
.dps h4{font:600 14px/1.3 var(--sans);margin:0 0 8px}
.dps p{margin:0;font-size:14px}
.dpr{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
@media (max-width:760px){.dpg{grid-template-columns:1fr}}
/* Profile pictures and client logos */
.av.lo{border-radius:8px;background:#fff;border:1px solid var(--line);color:#0a1a3a}
.av.lo img{object-fit:contain;padding:2px}
.picrow{display:flex;align-items:center;gap:16px;margin:0 0 16px}
.picrow .av.lg{width:72px;height:72px}
label.btn{cursor:pointer;margin-top:6px}
.co{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:auto 0 0;padding:10px 12px;border-top:1px solid var(--side-line);color:var(--side-fg);font-size:14px}
.co .av.lg{width:40px;height:40px}
.co-up{flex-basis:100%;border:1px solid var(--side-line);border-radius:100px;padding:4px 12px;font-size:13px;text-align:center;cursor:pointer}
.co-up:hover{background:var(--side-line)}
.co-up:focus-within{outline:3px solid var(--lime);outline-offset:2px}
.prev.stg+.co{margin-top:0}.co+.prev{margin-top:0}
/* Styled drop-downs (js/dropdown.js) */
select.dd-native{display:none}
.dd{position:relative;display:inline-block;min-width:190px;max-width:100%}
.fld .dd,.form .dd{display:block;width:100%;min-width:0}
.dd-btn{display:flex;align-items:center;width:100%;gap:10px;font:inherit;font-size:15px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:100px;padding:8px 18px;cursor:pointer;text-align:left;min-height:40px}
.dd-btn:hover:not(:disabled),.dd.open .dd-btn{border-color:var(--fg)}
.dd-btn:disabled{opacity:.5;cursor:default}
.dd-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-chev{flex:none;margin-right:2px;color:var(--mut);transition:transform .15s}
.dd.open .dd-chev{transform:rotate(180deg)}
.form .dd-btn{border-radius:10px}
.dd-list{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:100%;width:max-content;max-width:min(360px,90vw);max-height:320px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 34px rgba(10,26,58,.16)}
.dd.up .dd-list{top:auto;bottom:calc(100% + 6px)}
.dd-list li{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:100px;font-size:15px;color:var(--fg);cursor:pointer;white-space:nowrap}
.dd-list li.act{background:var(--hover)}
.dd-list li.on{font-weight:600}
.dd-list li[aria-disabled="true"]{opacity:.45;cursor:default}
.dd-tick{flex:none;visibility:hidden;color:var(--fg)}
.dd-list li.on .dd-tick{visibility:visible}
@media (prefers-reduced-motion:reduce){.dd-chev{transition:none}}
/* Activity colours: same thin frame as the hourly screenshot rows, used in staff lists too */
.pill.actp{background:transparent!important;border:2px solid currentColor!important;box-shadow:none!important;font-size:13px;padding:0 8px;font-weight:600;line-height:1.5}
.pill.actp.act-r{color:#F02B2B!important}.pill.actp.act-o{color:#F2B600!important}.pill.actp.act-g{color:#1DB954!important}
/* Under each screenshot: activity in the 10 minutes before it */
.shrow .shw{margin:0;min-width:0}
/* Phone: smaller captions under screenshots */
@media (max-width:760px){
  .shot,.shot img{border-radius:7px}
  .shc{font-size:11.5px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .shc .dot{width:5px;height:5px;margin:0 3px 1px}
}
}
.shp{margin:4px 0 0;text-align:center;font-size:12px;font-weight:600;line-height:1.3}
.shp.act-r{color:#F02B2B;background:none}.shp.act-o{color:#F2B600;background:none}.shp.act-g{color:#1DB954;background:none}
.phnote{margin:0;padding:10px 14px;border-radius:12px;background:var(--hover);color:var(--fg);font-size:14px}
/* Date pickers on forms and filters (js/datepicker.js) use the same pop-up calendar */
.dpw{display:inline-block}
.fld .dpw,.addrow .dpw{display:block}
.fld .dpw .datebtn,.addrow .dpw .datebtn{width:100%;min-height:40px}
.dpw .calpop{left:0;transform:none}
.dpw .calpop.end{left:auto;right:0} /* a date box near the right edge opens its calendar towards the left */
.cal .cd.old{opacity:.35;cursor:default;pointer-events:none}
.pday.act:not(.on){background:var(--hover)}
.calrow .fld.dt{flex:0 0 190px}
/* Chosen day: one clean gradient filling the whole shape (no repeat under the border), and day buttons kept perfectly round */
.pday.on,.wday.on,.cal .cd.sel{background-origin:border-box;background-repeat:no-repeat;background-size:100% 100%}
.pday.on{border:0}
.pday{display:grid;place-items:center;width:100%;max-width:38px;aspect-ratio:1/1;justify-self:center;line-height:1;overflow:hidden}
/* Calendar page: the chosen day is gradient edge to edge, also while hovered. The base colour is the gradient's own lime,
   so a rounding gap at the left edge can never show a dark line. Today keeps its outline. */
.cal .cd.sel,.cal .cd.sel:hover{border-color:transparent;background-color:#DDFF54;background-image:linear-gradient(90deg,#DDFF54,#002233);background-origin:border-box;background-clip:border-box;background-repeat:no-repeat;background-size:100% 100%;box-shadow:none}
.cal .cd.sel.today{border-color:var(--fg)}
.cal .cd:focus:not(:focus-visible){outline:none}
.pday.on,.wday.on{background-color:#DDFF54}
/* Bottom of Timesheets / Reports / Screenshots: keep scrolling to move on to the next page */
.nextpage{margin:40px auto 8px;max-width:340px;text-align:center}
.nextpage button{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--mut);font:500 15px/1.2 var(--sans);cursor:pointer;padding:8px 14px;border-radius:100px}
.nextpage button:hover{color:var(--fg);background:var(--hover)}
.np-bar{height:4px;border-radius:100px;background:var(--track);overflow:hidden;margin-top:8px}
.np-bar i{display:block;height:100%;width:0;background-image:linear-gradient(90deg,#DDFF54,#002233);transition:width .15s}
@media (prefers-reduced-motion:reduce){.np-bar i{transition:none}}
/* Calendar day pop-up */
.modal-wrap{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px}
.modal-bg{position:absolute;inset:0;background:rgba(10,26,58,.45)}
.modal{position:relative;width:min(860px,100%);max-height:calc(100vh - 32px);overflow-y:auto;margin:0;box-shadow:0 24px 60px rgba(10,26,58,.3)}
.prevpage{margin:0 auto 14px}
.prevpage .np-bar{margin:0 0 4px}
.prevpage button{padding:4px 12px;font-size:13px}
.hd{display:block;font-size:12px;margin-top:2px;white-space:normal;max-width:340px}
/* Emergency unlock pop-up */
.upop{width:min(420px,100%);text-align:center}
.upop{position:relative}
.upop h3{font:500 24px/1.2 var(--serif);margin:4px 0 4px;text-align:center}
.upname{font-size:17px;font-weight:600;text-align:center;color:var(--fg)}
.upx{position:absolute;top:12px;right:12px}
.upcode{font:600 52px/1.1 var(--sans);letter-spacing:.14em;margin:14px 0 10px;font-variant-numeric:tabular-nums}
.upop .np-bar{margin-top:12px}
@media (prefers-reduced-motion:reduce){.upop .np-bar i{transition:none!important}}
/* Remote access pop-up */
.rpop{width:min(520px,100%);position:relative}
.rpop h3{font:500 24px/1.2 var(--serif);margin:4px 0 4px;text-align:center}
/* One even gap between the blocks of every page (cards, KPI rows, two-column rows) */
#view>*+*{margin-top:16px}
/* Icons on the right of the Live / Overview top boxes */
.kpi.has-ic{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kpi.has-ic>div{min-width:0}
.kpi-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#E8F1F8;color:#0a1a3a}
.kpi-ic svg{width:24px;height:24px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .kpi-ic{background:#1d3466;color:#BED7EA}}
:root[data-theme="dark"] .kpi-ic{background:#1d3466;color:#BED7EA}
/* Scrollbars everywhere: invisible until something is being scrolled, then a slim navy (sky in dark mode) pill */
*{scrollbar-width:thin;scrollbar-color:transparent transparent}
.is-scrolling{scrollbar-color:rgba(10,26,58,.35) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border-radius:100px}
.is-scrolling::-webkit-scrollbar-thumb{background:rgba(10,26,58,.35)}
.is-scrolling::-webkit-scrollbar-thumb:hover{background:rgba(10,26,58,.55)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .is-scrolling{scrollbar-color:rgba(190,215,234,.45) transparent}:root:not([data-theme="light"]) .is-scrolling::-webkit-scrollbar-thumb{background:rgba(190,215,234,.45)}}
:root[data-theme="dark"] .is-scrolling{scrollbar-color:rgba(190,215,234,.45) transparent}
:root[data-theme="dark"] .is-scrolling::-webkit-scrollbar-thumb{background:rgba(190,215,234,.45)}
/* "All staff" back button in the leave history pop-up */
.histback{margin:16px 0 18px}
.histback .btn{gap:6px;padding-left:12px}
/* Buttons that sit in a row of boxes (e.g. "Show leave history") are the same height as those boxes */
.btn.fit{min-height:40px;padding:8px 20px;font-size:15px;white-space:nowrap}
.calrow .datebtn{min-height:40px}
/* Payroll: round tick boxes beside each photo, and "Pay selected" sized like the period pill */
.paysel{display:flex;align-items:center;gap:12px;font-weight:500;cursor:pointer}
th .paysel{font-weight:500;color:var(--mut)}
input.rchk{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0;border-radius:50%;border:1.5px solid var(--mut);background:var(--card);cursor:pointer;display:grid;place-items:center}
input.rchk:hover{border-color:var(--fg)}
input.rchk:checked{border-color:var(--btn-bg);background:var(--btn-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%23F2F7FB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.mnav{min-height:40px}
.paybtn{gap:10px;padding-right:8px}
.paybtn b{background-image:linear-gradient(90deg,#DDFF54,#B5D14F);color:#0a1a3a;border-radius:100px;min-width:30px;padding:2px 10px;font-size:13px;font-weight:700;text-align:center} /* count: the menu colours, only a gentle step of the gradient */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) input.rchk:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%230a1a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
:root[data-theme="dark"] input.rchk:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%230a1a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* Client form: late clock-in alert switch and its minutes */
.lateal{border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.lateal p{margin:0;font-size:13px}
.lateal .grid2{max-width:360px}
.pf button{cursor:pointer;font-family:var(--sans)}
/* Left menu: Payroll / Maintenance sub menus (room for up to 7 items) opens on hover or keyboard focus, closes when you move away */
.navgroup{display:flex;flex-direction:column;gap:6px}
.subnav{display:flex;flex-direction:column;gap:6px;margin:0 0 0 14px;padding-left:10px;border-left:1px solid var(--side-line);
  max-height:0;opacity:0;overflow:hidden;visibility:hidden;margin-top:-6px;
  transition:max-height .28s ease .12s,opacity .2s ease .12s,margin-top .28s ease .12s,visibility 0s linear .4s}
.navgroup:hover .subnav,.navgroup:focus-within .subnav,.navgroup.open .subnav{max-height:320px;opacity:1;visibility:visible;margin-top:0;
  transition:max-height .28s ease,opacity .22s ease .05s,margin-top .28s ease,visibility 0s}
@media (prefers-reduced-motion:reduce){.subnav,.navgroup:hover .subnav{transition:none}}
/* While the pointer is on Maintenance it looks selected and the current page's highlight steps aside; moving away puts it back */
.nav:has(.navgroup:hover) button[aria-current]:not(.navgroup button){background-image:none;font-weight:400}
.navgroup:hover>button{background-image:linear-gradient(90deg,#DDFF54,#002233);color:#fff;font-weight:600}
.subnav button{padding:8px 14px;font-size:14px}
input.sw:disabled{opacity:.45;cursor:not-allowed}
/* Staff details page (read only) */
.backbtn{gap:6px;padding-left:12px}
.sv-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sv-head .av.lg{width:84px;height:84px}
.sv-who{flex:1;min-width:200px}
.sv-who h2{font:500 30px/1.1 var(--serif);margin:0 0 6px}
.sv-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--mut);font-size:15px}
.kvv{display:inline-flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.btn.cpy{gap:5px;padding:3px 10px;font-size:12px}
/* Staff form in clear sections */
.sform h2{font:500 26px/1.15 var(--serif);margin:0 0 4px}
.fsec{border-top:1px solid var(--line);padding-top:18px;margin-top:18px;display:flex;flex-direction:column;gap:12px}
.fsec h3{margin:0}
.fsec>p.mut{margin:-6px 0 0;font-size:13px}
.phrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:12px;align-items:end}
.sform-save{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
@media (max-width:560px){.phrow{grid-template-columns:1fr}}
/* A switch inside a tick-box label keeps its switch size (the label's 18px tick-box size squashed it) */
.chk input.sw{width:44px;height:25px;accent-color:auto}
.lateal .chk{gap:12px;font-weight:600}
.kpi.go{cursor:pointer;transition:border-color .15s}
.kpi.go:hover{border-color:var(--fg)}
.kpi.go:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
#open-alerts{scroll-margin-top:16px}
/* Staff add/edit form: the same boxes as the staff details page */
.fh2{font:500 26px/1.15 var(--serif);margin:0}
.fhead{align-items:flex-start}
.fhead .picrow{margin:0;flex:0 0 auto;max-width:260px}
.fhead-f{flex:1;min-width:240px}
.fcard{display:flex;flex-direction:column;gap:12px}
.fcard h3{margin:0}
.fcard>p.mut{margin:-6px 0 0;font-size:13px}
.fsave .acts{justify-content:flex-start}
/* Passport copy row in the staff form */
.docrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:14px}
.docrow>span:nth-child(2){flex:1;min-width:160px}
.doc-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--hover);font-size:12px;font-weight:700;color:var(--fg)}
/* Private details: Passport (copy + number) and Bank details as two tidy groups */
.pgroup{display:flex;flex-direction:column;gap:10px}
.pgroup+.pgroup{border-top:1px solid var(--line);padding-top:14px}
.pgroup h4{margin:0;font:600 14px/1.3 var(--sans);color:var(--mut);letter-spacing:.04em;text-transform:uppercase}
.pgroup .kv{padding:4px 0;border-bottom:0}
/* "Show leave history" and "Show timesheet history": text in the page colour; on hover they turn the page colour with navy text, like the menu buttons */
.btn.fit:not(.ghost){color:#F2F7FB;transition:background-color .3s,color .3s,border-color .3s}
.btn.fit:not(.ghost):hover:not(:disabled){background:#E8F1F8;color:#0a1a3a;border-color:#E8F1F8}
/* Payroll: total of the ticked staff, next to Pay selected */
.payright{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.paytotal{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.paytotal span{font-size:12px}
.paytotal b{font:500 22px/1.15 var(--serif);font-variant-numeric:tabular-nums}
.rlink{overflow-wrap:anywhere}
/* Add rows (Calendar: Add leave, Public holidays): every box and the button are the same 40px pill, side by side */
.addrow label{flex:1 1 180px;min-width:0}
.addrow .acts{flex:0 0 auto}
.addrow input:not([type=checkbox]):not([type=hidden]){font:inherit;font-size:15px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:100px;padding:8px 18px;min-height:40px;width:100%;box-sizing:border-box}
.addrow input:not([type=checkbox]):focus{outline:none;border-color:var(--fg)}
.addrow .dd,.addrow .dpw{display:block;width:100%;min-width:0}
.addrow .datebtn,.addrow .dd-btn{min-height:40px;width:100%}
.addrow .btn.fit{min-height:40px;height:40px;padding:0 22px}