/* EarthRoster V1452.131 — carefully limited to two employee Clock areas.
   Preserve V130 shift selection logic and the original app header, bottom nav,
   Messages, approved Timesheet Settings, PayPal and billing untouched. */
@layer er120 {
@media (max-width:767px) {
 /* Future shift: restore the original spacious vertical card and writing sizes.
    Only its border/corners and gentle surface colour are refreshed. */
 body.er108-employee-clock #page .er152-ready.er130-upcoming {
   position:relative!important;display:flex!important;flex-direction:column!important;
   align-items:flex-start!important;justify-content:flex-start!important;
   gap:0!important;grid-template-columns:none!important;grid-template-rows:none!important;
   grid-template-areas:none!important;min-height:218px!important;height:auto!important;
   max-height:none!important;overflow:hidden!important;
   padding:17px 19px 16px!important;margin:0 0 12px!important;
   border:1px solid #bcd9ba!important;border-left:4px solid #378e63!important;
   border-radius:16px!important;
   background:linear-gradient(117deg,#edf5e8 0%,#e1efd9 55%,#dcedd7 100%)!important;
   box-shadow:0 5px 12px rgba(35,93,56,.08)!important;
 }
 body.er108-employee-clock #page .er152-ready.er130-upcoming::before {
   content:''!important;position:absolute!important;right:-44px!important;top:-48px!important;
   width:114px!important;height:114px!important;border-radius:50%!important;
   border:1px solid #b8d5bb!important;background:rgba(255,255,255,.10)!important;
   pointer-events:none!important;
 }
 body.er108-employee-clock #page .er152-ready.er130-upcoming::after {
   content:''!important;position:absolute!important;right:14px!important;bottom:0!important;
   width:90px!important;height:3px!important;background:linear-gradient(90deg,transparent,#d8ae5e)!important;
   border-radius:5px 5px 0 0!important;pointer-events:none!important;
 }
 body.er108-employee-clock #page .er152-ready.er130-upcoming > small:first-child {
   display:block!important;grid-area:auto!important;align-self:flex-start!important;
   justify-self:auto!important;text-align:left!important;
   font:500 11px/1.4 system-ui,sans-serif!important;
   color:#56745d!important;margin:0 0 13px!important;
 }
 body.er108-employee-clock #page .er152-ready.er130-upcoming .er156-clock-label {
   display:block!important;grid-area:auto!important;align-self:flex-start!important;
   font:700 10px/1.4 system-ui,sans-serif!important;
   letter-spacing:1.1px!important;text-transform:uppercase!important;
   color:#397449!important;margin:0 0 5px!important;
 }
 body.er108-employee-clock #page .er152-ready.er130-upcoming h2 {
   display:block!important;grid-area:auto!important;align-self:flex-start!important;
   font:730 23px/1.2 system-ui,sans-serif!important;letter-spacing:-.7px!important;
   color:#234a32!important;margin:0 0 7px!important;
   white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere!important;
   max-width:100%!important;
 }
 body.er108-employee-clock #page .er152-ready.er130-upcoming > p {
   display:block!important;grid-area:auto!important;align-self:flex-start!important;
   justify-self:auto!important;text-align:left!important;
   font:500 14px/1.5 system-ui,sans-serif!important;
   color:#45674e!important;margin:0 0 14px!important;
   white-space:normal!important;
 }
 /* Original future card did not include a relative-day pill. */
 body.er108-employee-clock #page .er152-ready.er130-upcoming .er130-relative-day {
   display:none!important;
 }
 body.er108-employee-clock #page .er152-ready.er130-upcoming > .er152-btn {
   display:inline-flex!important;grid-area:auto!important;align-self:flex-start!important;
   justify-self:auto!important;align-items:center!important;justify-content:center!important;
   min-width:130px!important;height:42px!important;min-height:42px!important;
   padding:8px 15px!important;margin:0!important;
   font:650 13px/1.3 system-ui,sans-serif!important;
   background:#fff!important;color:#264e37!important;border:1px solid #c0d6bd!important;
   border-radius:10px!important;box-shadow:0 1px 2px rgba(27,73,37,.035)!important;
 }
 body.er108-employee-clock #page .er152-ready.er130-upcoming .er156-clock-hint {
   display:block!important;grid-area:auto!important;align-self:flex-start!important;
   max-width:100%!important;text-align:left!important;white-space:normal!important;
   font:400 11px/1.5 system-ui,sans-serif!important;
   color:#607e60!important;margin:12px 0 0!important;padding:0!important;
 }
 /* Weekly filters: remove the unfilled white seam under selected green. */
 body.er108-employee-clock #page .er130-timesheets .er152-filters {
   display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
   gap:0!important;padding:0!important;height:38px!important;min-height:38px!important;
   box-sizing:border-box!important;border:1px solid #d5e4d5!important;
   border-radius:10px!important;overflow:hidden!important;background:#fff!important;
 }
 body.er108-employee-clock #page .er130-timesheets .er152-filters button,
 body.er108-employee-clock #page .er130-timesheets .er152-filters button[aria-pressed="true"] {
   box-sizing:border-box!important;width:100%!important;height:100%!important;
   min-height:0!important;min-width:0!important;padding:0 2px!important;margin:0!important;
   border:0!important;border-radius:0!important;background:transparent!important;
   box-shadow:none!important;font-size:10px!important;line-height:36px!important;
   color:#677d6b!important;font-weight:530!important;
 }
 body.er108-employee-clock #page .er130-timesheets .er152-filters button[aria-pressed="true"] {
   background:#d9eddf!important;color:#195c3d!important;font-weight:660!important;
   box-shadow:inset 0 -3px 0 #29865a!important;
 }
 /* Slim time entries: quieter typography without sacrificing contrast. */
 body.er108-employee-clock #page .er130-timesheets .er152-entry-head h3 {
   font-size:12.5px!important;line-height:17px!important;letter-spacing:-.12px!important;
   font-weight:640!important;color:#254633!important;
 }
 body.er108-employee-clock #page .er130-timesheets .er152-status {
   font-weight:600!important;letter-spacing:0!important;
 }
 body.er108-employee-clock #page .er130-timesheets .er152-entry-hours {
   font-weight:460!important;color:#56705e!important;
 }
 body.er108-employee-clock #page .er130-timesheets .er152-entry-hours strong {
   font-weight:690!important;color:#246e47!important;
 }
 body.er108-employee-clock #page .er130-timesheets .er152-entry details summary {
   font-weight:460!important;color:#627c67!important;
 }
 body.er108-employee-clock #page .er130-timesheets .er152-entry footer .er152-btn {
   font-weight:620!important;background:#eff7ef!important;
 }
}
@media (max-width:350px) {
 body.er108-employee-clock #page .er152-ready.er130-upcoming {padding:15px 15px 14px!important;min-height:210px!important;}
 body.er108-employee-clock #page .er152-ready.er130-upcoming h2 {font-size:23px!important;line-height:1.2!important;}
 body.er108-employee-clock #page .er130-timesheets .er152-entry-head h3 {font-size:12px!important;line-height:16px!important;}
}
}