/* EarthRoster V1452.132 — MICRO-POLISH ONLY. No JS, HTML structure, layout
   repositioning, app header, mobile menu, messaging, settings, PayPal or billing edits.
   Applies exclusively to the employee Clock content on small screens. */
@layer er120 {
@media (max-width:767px) {
  /* The approved future-shift card keeps its V131 dimensions and text exactly. */
  body.er108-employee-clock #page .er152-ready.er130-upcoming {
    border-color:#a8cfa9!important;
    border-left-color:#2e8454!important;
    background:linear-gradient(122deg,#eaf4e4 0%,#e0efd9 64%,#d7eacb 100%)!important;
    box-shadow:0 6px 16px rgba(35,88,50,.085)!important;
  }
  body.er108-employee-clock #page .er152-ready.er130-upcoming::before {
    border-color:#add1ae!important;background:rgba(255,255,255,.12)!important;
  }
  body.er108-employee-clock #page .er152-ready.er130-upcoming > .er152-btn {
    border-color:#a9cbaa!important;box-shadow:0 2px 5px rgba(33,70,41,.065)!important;
  }
  /* Today's entry: tasteful separation and stronger contrast for useful text. */
  body.er108-employee-clock #page .er152-time:not(.er130-timesheets) .er152-entry {
    border-color:#cbded0!important;border-left-color:#428d5c!important;
    box-shadow:0 4px 13px rgba(28,80,48,.065)!important;
  }
  body.er108-employee-clock #page .er152-section-title h3 {
    color:#234b36!important;
  }
  /* Weekly entry cards retain their V131 compact height and typography scale. */
  body.er108-employee-clock #page .er130-timesheets .er152-entry {
    border-color:#cbded0!important;border-left-color:#398c5b!important;
    box-shadow:0 3px 11px rgba(28,80,48,.055)!important;
  }
  body.er108-employee-clock #page .er130-timesheets .er152-entry-head h3 {
    color:#294c39!important;font-weight:630!important;
  }
  body.er108-employee-clock #page .er130-timesheets .er152-entry-hours {
    color:#516e5b!important;
  }
  body.er108-employee-clock #page .er130-timesheets .er152-entry-meta {
    color:#5c7666!important;
  }
  body.er108-employee-clock #page .er130-timesheets .er152-entry details summary {
    color:#526e5a!important;
  }
  body.er108-employee-clock #page .er130-timesheets .er152-entry footer .er152-btn {
    border-color:#a7cfb0!important;background:#eaf6ec!important;
    color:#205e3d!important;font-weight:610!important;
  }
  /* Keep existing status sizes, simply distinguish pending vs approved. */
  body.er108-employee-clock #page .er152-status.pending {
    background:#fff0d4!important;color:#805414!important;
    border:1px solid #f2d9a9!important;
  }
  body.er108-employee-clock #page .er152-status.approved {
    background:#e5f4e7!important;color:#206b42!important;
    border:1px solid #c1e1c8!important;
  }
  /* Recorded / Approved / Pending are small colour signals, not banners. */
  body.er108-employee-clock #page .er130-timesheets .er152-summary>div:first-child {
    background:#eaf3fb!important;border-top-color:#4b83a6!important;
  }
  body.er108-employee-clock #page .er130-timesheets .er152-summary>div:nth-child(2) {
    background:#e5f4e8!important;border-top-color:#438e5f!important;
  }
  body.er108-employee-clock #page .er130-timesheets .er152-summary>div:nth-child(3) {
    background:#fff0db!important;border-top-color:#c99c43!important;
  }
  body.er108-employee-clock #page .er130-timesheets .er152-summary span {
    color:#54705f!important;
  }
  /* V131 seamless selected filter stays intact; increase distinction modestly. */
  body.er108-employee-clock #page .er130-timesheets .er152-filters button[aria-pressed="true"] {
    background:#d5e9db!important;color:#1e6545!important;
    box-shadow:inset 0 -3px 0 #277f53!important;
  }
  body.er108-employee-clock #page .er130-timesheets .er152-filters button:not([aria-pressed="true"]) {
    color:#647c6c!important;
  }
  body.er108-employee-clock #page .er130-timesheets .er152-days button[aria-pressed="true"] {
    background:#d9ebde!important;box-shadow:inset 0 0 0 1px #a9d4b6!important;
  }
  /* Date heading's visual relationship to entry cards, no structural changes. */
  body.er108-employee-clock #page .er130-timesheets .er152-date>h3 {
    color:#536e5a!important;font-weight:650!important;
  }
  body.er108-employee-clock #page .er130-timesheets .er152-more {
    border-color:#d4e2d5!important;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.er108-employee-clock #page .er152-ready.er130-upcoming {transition:none!important;}
}
}