/* Entry form and agency employee cards: keep controls visible on touch screens. */
@media screen and (max-width:1000px){
html:root body.add-hours-modal-open>header,
html:root body.add-hours-modal-open #app>nav,
html:root body.add-hours-modal-open .employee-web-nav{display:none!important}
html:root body.add-hours-modal-open #app #hours.add-hours-fullscreen{
position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;
padding:12px max(12px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
overflow:auto!important;z-index:2147483647!important;box-sizing:border-box!important}
html:root body.add-hours-modal-open #app #hours.add-hours-fullscreen>.dashboard,
html:root body.add-hours-modal-open #app #hours.add-hours-fullscreen>.recent-card{display:none!important}
html:root body.add-hours-modal-open #app #hours #addHoursCard.add-hours-modal{
position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;min-height:0!important;height:auto!important;
margin:0!important;padding:18px 14px!important;overflow:visible!important;border-radius:16px!important;box-sizing:border-box!important}
html:root body.add-hours-modal-open #app #hours #addHoursCard .top{padding-right:44px!important}
html:root body.add-hours-modal-open #app #hours #addHoursCard .add-hours-modal-close{
position:absolute!important;top:10px!important;right:10px!important;width:38px!important;height:38px!important;min-height:38px!important}
html:root body.add-hours-modal-open #app #hours #addHoursCard .add-hours-calculation{
display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
html:root body.add-hours-modal-open #app #hours #addHoursCard .add-hours-calculation>:is(.hours-main,.additional-hours-box,#additionalHoursReasonWrap,.hours-help){
grid-column:1!important;grid-row:auto!important;min-width:0!important;width:100%!important;margin:0!important;padding:0!important;
background:transparent!important;border:0!important;box-shadow:none!important}
html:root body.add-hours-modal-open #app #hours #addHoursCard .st-form{gap:14px!important}
html:root body.add-hours-modal-open #app #hours #addHoursCard :is(input:not([type=checkbox]),select){
width:100%!important;min-width:0!important;max-width:100%!important;min-height:46px!important;height:46px!important;box-sizing:border-box!important;font-size:16px!important}
html:root body.add-hours-modal-open #app #hours #addHoursCard #additionalHoursReasonWrap[hidden],
html:root body.add-hours-modal-open #app #hours #addHoursCard #additionalHours[hidden]{display:none!important}
html:root body[data-hgvera-suite=on].add-hours-modal-open #app #hours.add-hours-fullscreen{background:#102541!important}
html:root body[data-hgvera-suite=on].add-hours-modal-open #app #hours #addHoursCard{background:#173354!important;border:1px solid #3b5877!important;box-shadow:none!important}
html:root body[data-hgvera-suite=on].add-hours-modal-open #app #hours #addHoursCard :is(input:not([type=checkbox]),select,.nightout-toggle){
background:#102b49!important;border:1px solid #496681!important;color:#edf4ff!important;box-shadow:none!important}
}
@media screen and (min-width:701px) and (max-width:1400px){
html:root body .agency-shell #employees .employee-table-head{display:none!important}
html:root body .agency-shell #employees :is(.employee-table-wrap,.employee-table-body){
background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;min-width:0!important}
html:root body .agency-shell #employees .employee-row{
display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto!important;
gap:10px 14px!important;padding:14px!important;margin:0 0 10px!important;border:1px solid #496681!important;border-radius:14px!important;min-width:0!important}
html:root body .agency-shell #employees .employee-row>div{min-width:0!important;grid-column:auto!important;grid-row:auto!important}
html:root body .agency-shell #employees .employee-row>.employee-person{grid-column:1!important;grid-row:1 / 3!important;padding-right:0!important}
html:root body .agency-shell #employees .employee-row>.employee-role{grid-column:2!important;grid-row:1!important}
html:root body .agency-shell #employees .employee-row>.employee-agency{grid-column:2!important;grid-row:2!important}
html:root body .agency-shell #employees .employee-row>.employee-status-cell{grid-column:3!important;grid-row:1 / 3!important;justify-self:end!important}
html:root body .agency-shell #employees .employee-row>.employee-contact{grid-column:1!important;grid-row:3!important;overflow-wrap:anywhere!important}
html:root body .agency-shell #employees .employee-row>.employee-rates{grid-column:2 / 4!important;grid-row:3!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
html:root body .agency-shell #employees .employee-rates .agency-charge-lines{padding:0!important;margin:0!important;border:0!important}
html:root body .agency-shell #employees .employee-rates small{grid-column:1 / -1!important}
html:root body .agency-shell #employees .employee-row>.employee-actions{
grid-column:1 / -1!important;grid-row:4!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
width:100%!important;gap:8px!important;min-width:0!important}
html:root body .agency-shell #employees .employee-actions button{
position:relative!important;width:100%!important;min-width:0!important;max-width:100%!important;
height:40px!important;min-height:40px!important;max-height:none!important;font-size:12px!important;padding:8px!important;white-space:normal!important}
}

/* Agency employee list follows the Admin HGVera cards. */
@media screen{
html:root body[data-hgvera-suite=on] #app.agency-shell #employees,
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employees-page,
html:root body[data-hgvera-suite=on] #app.agency-shell #employees :is(.employee-table-wrap,.employee-table-body){
background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employees-page{padding:0!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees :is(.employee-row,.employee-stat){
background:#1a2737!important;background-image:none!important;border:1px solid #3b4c60!important;box-shadow:none!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-row{border-radius:18px!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees :is(.employee-person span,.employee-person small,.employee-contact,.employee-role small,.employee-stat small,.employees-title-row p,.employee-rates small){color:#afbdd0!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-avatar{background:#193452!important;color:#9bc8ff!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-search{
display:flex!important;align-items:center!important;gap:8px!important;padding:0 12px!important;
background:#102b49!important;border:1px solid #496681!important;border-radius:12px!important;box-shadow:none!important;overflow:hidden!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-search input{
flex:1!important;min-width:0!important;width:100%!important;padding:10px 0!important;
background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#edf4ff!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-tools select{background:#102b49!important;border-color:#496681!important;color:#edf4ff!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-tools>button{background:#244361!important;border-color:#496681!important;color:#d3e2f5!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-actions :is(.employee-details-btn,.employee-edit-btn){
background:#193452!important;color:#9bc8ff!important;border:1px solid #3a689a!important;box-shadow:none!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-actions .employee-resend-btn{
background:#153d31!important;color:#91dfb9!important;border:2px solid #347b62!important;box-shadow:none!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-actions .employee-delete-btn{
background:#402328!important;color:#ffb4bd!important;border:2px solid #914857!important;box-shadow:none!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-stat-icon{background:#193452!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-stat-icon.green{background:#153d31!important;color:#91dfb9!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-stat-icon.orange{background:#49391d!important;color:#ffd27d!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-stat-icon.red{background:#402328!important;color:#ff96a8!important}
html:root body[data-hgvera-suite=on] #app.agency-shell .sidebar,
html:root body[data-hgvera-suite=on] #app.agency-shell .sidebar .nav{background:#1a2737!important;border-color:#3b4c60!important;box-shadow:none!important}
html:root body[data-hgvera-suite=on] #app.agency-shell .sidebar .nav button{color:#afbdd0!important}
html:root body[data-hgvera-suite=on] #app.agency-shell .sidebar .nav button.active{background:#4b3c29!important;color:#edf4ff!important}
}
@media screen and (max-width:700px){
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-tools{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-search{grid-column:1 / -1!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-tools :is(select,button){width:100%!important;min-width:0!important;min-height:44px!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-person{padding-right:100px!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-person b{font-size:16px!important}
html:root body[data-hgvera-suite=on] #app.agency-shell #employees .employee-row{padding:14px!important;gap:10px!important}
}