/* EarthRoster v1452.134 — employee Clock content only.
   Original header, bottom navigation, upcoming-shift card, Messages on mobile,
   settings, and all timesheet/clock-in business rules remain untouched. */
@layer er120 {
@media (max-width:767px) {
  /* Only the actionable Ready-to-clock-in state gets an expanded colourful treatment. */
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn) {
    min-height:154px!important;
    padding:18px 17px 17px 19px!important;
    border:1px solid #a6d2b3!important;
    border-left:6px solid #238251!important;
    background:linear-gradient(115deg,#e7f5e9 0%,#d6eddc 58%,#c1e4cd 100%)!important;
    box-shadow:0 7px 18px rgba(24,91,53,.11)!important;
    border-radius:15px!important;
    gap:5px 10px!important;
  }
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn)::before {
    width:115px!important;height:115px!important;right:-31px!important;top:-36px!important;
    border-color:#a7d4b5!important;background:rgba(255,255,255,.20)!important;
  }
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn) h2 {
    font-size:19px!important;line-height:24px!important;color:#123d2a!important;font-weight:780!important;
  }
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn) .er156-clock-label {color:#145d3e!important;}
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn)>p {color:#2c6245!important;}
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn)>.er152-btn {
    height:43px!important;min-height:43px!important;
    background:linear-gradient(135deg,#238754 0%,#125f3e 100%)!important;
    color:#ffffff!important;border:1px solid #0e6040!important;
    box-shadow:0 3px 8px rgba(14,84,51,.18)!important;
    font-size:12px!important;font-weight:750!important;border-radius:10px!important;
  }
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn)>.er152-btn svg {stroke:#fff!important;}
  /* Existing missing-time notice remains functional, and doesn't visually collide. */
  body.er108-employee-clock #page .er152-attention {
    margin:0 0 14px!important;border-color:#e6bc7c!important;
    background:#fff4df!important;position:relative!important;isolation:isolate!important;
  }
  body.er108-employee-clock #page .er152-attention summary {min-height:47px!important;}
  body.er108-employee-clock #page .er152-section-title {margin:3px 0 8px!important;}
  /* Existing Today's entry size and structure stay, now visually richer. */
  body.er108-employee-clock #page .er152-time:not(.er130-timesheets) .er152-entry {
    background:linear-gradient(128deg,#ffffff 0%,#ffffff 65%,#f2f9f3 100%)!important;
    border:1px solid #bedcca!important;border-left:4px solid #348d59!important;
    border-radius:13px!important;box-shadow:0 4px 12px rgba(16,78,41,.08)!important;
  }
  body.er108-employee-clock #page .er152-time:not(.er130-timesheets) .er152-entry-head h3 {
    color:#1d4732!important;font-weight:750!important;
  }
  body.er108-employee-clock #page .er152-time:not(.er130-timesheets) .er152-entry footer .er152-btn {
    background:#e3f2e7!important;border:1px solid #abd4b5!important;
    color:#165d3b!important;border-radius:9px!important;
    font-weight:700!important;box-shadow:0 2px 5px rgba(28,100,62,.06)!important;
  }
}
@media (prefers-reduced-motion:reduce) {body.er108-employee-clock #page .er152-ready{transition:none!important}}
}