/* EarthRoster 1452.129 — Clock content visual polish.
   Scoped to employee Clock content. No global header/footer, messaging,
   approved Timesheet Settings, PayPal, billing, or behaviour changes. */
@layer er120 {
@media (max-width:767px) {
  body.er108-employee-clock #page .er152-workspace {
    --er129-forest:#173e31;
    --er129-green:#24794e;
    --er129-green-2:#3b9966;
    --er129-mist:#edf5ec;
    --er129-navy:#356684;
    --er129-amber:#976520;
    --er129-line:#e1e9e2;
    --er129-muted:#71877c;
  }
  /* More intentional content rhythm, no change to fixed app chrome. */
  body.er108-employee-clock #page .er152-time {gap:0!important}
  body.er108-employee-clock #page .er152-tabs {
    min-height:46px!important;height:46px!important;margin:0 0 11px!important;
    padding-bottom:3px!important;background:transparent!important;
  }
  body.er108-employee-clock #page .er152-tabs button,
  body.er108-employee-clock #page .er152-tabs button[aria-pressed="true"]{
    min-height:42px!important;height:42px!important;font-size:12px!important;
    border-bottom-width:2px!important;transition:background-color .16s ease,color .16s ease!important;
  }
  body.er108-employee-clock #page .er152-tabs button[aria-pressed="true"]{
    background:linear-gradient(180deg,transparent 20%,#e8f3e8 100%)!important;
  }
  /* Next shift / idle summary, muted texture & tight vertical rhythm. */
  body.er108-employee-clock #page .er152-ready{
    min-height:112px!important;margin-bottom:11px!important;
    padding:13px 15px 12px 16px!important;border:1px solid #d6e8db!important;
    border-left:4px solid var(--er129-green)!important;border-radius:13px!important;
    background:linear-gradient(115deg,#fff 0%,#fff 56%,#f0f8f2 100%)!important;
    box-shadow:0 5px 13px rgba(21,67,45,.055)!important;
    gap:2px 9px!important;
  }
  body.er108-employee-clock #page .er152-ready:before{
    right:-39px!important;top:-38px!important;width:104px!important;height:104px!important;
    border-color:#d6e8d9!important;background:transparent!important;
  }
  body.er108-employee-clock #page .er152-ready h2{
    font-size:17px!important;line-height:22px!important;font-weight:790!important;
    letter-spacing:-.45px!important;
  }
  body.er108-employee-clock #page .er152-ready>p{
    font-size:11px!important;line-height:15px!important;color:#527262!important;
  }
  body.er108-employee-clock #page .er152-ready>small:first-child{
    font-size:10px!important;color:#627f6e!important;
  }
  body.er108-employee-clock #page .er152-ready .er156-clock-hint{
    font-size:10px!important;line-height:14px!important;color:#738a79!important;
  }
  body.er108-employee-clock #page .er152-ready>.er152-btn{
    min-height:36px!important;border-radius:9px!important;padding:7px 7px!important;
    font-size:11px!important;background:linear-gradient(140deg,#2d8b55,#176344)!important;
    box-shadow:0 3px 9px #17634424!important;
  }
  /* Idle status has no action button: use the full width, not a fake empty column. */
  body.er108-employee-clock #page .er152-ready:not(:has(>.er152-btn)){
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;
    justify-content:center!important;gap:4px!important;min-height:108px!important;
    padding-top:12px!important;padding-bottom:11px!important;
  }
  body.er108-employee-clock #page .er152-ready:not(:has(>.er152-btn))>small:first-child{
    order:0!important;
  }
  body.er108-employee-clock #page .er152-ready:not(:has(>.er152-btn)) h2{
    order:1!important;font-size:18px!important;line-height:23px!important;
  }
  body.er108-employee-clock #page .er152-ready:not(:has(>.er152-btn))>p{
    order:2!important;align-self:flex-start!important;font-size:11px!important;
    line-height:15px!important;text-align:left!important;
  }
  body.er108-employee-clock #page .er152-ready:not(:has(>.er152-btn)) .er156-clock-hint{
    order:3!important;max-width:95%!important;margin-top:2px!important;
  }
  body.er108-employee-clock #page .er152-ready:not(:has(>.er152-btn)) .er156-clock-label:empty{display:none!important}
  /* Amber alerts are recognisable without dominating the view. */
  body.er108-employee-clock #page .er152-attention{
    margin:0 0 10px!important;border-radius:11px!important;
    border-color:#f0d5a5!important;background:#fffaef!important;
    box-shadow:none!important;
  }
  body.er108-employee-clock #page .er152-attention summary{
    min-height:41px!important;padding:9px 11px!important;font-size:11px!important;
    line-height:16px!important;
  }
  body.er108-employee-clock #page .er152-attention summary b{font-weight:760!important}
  body.er108-employee-clock #page .er152-attention summary span{font-size:10px!important;flex:none!important}
  /* Scannable Today section with the total as a low-contrast status chip. */
  body.er108-employee-clock #page .er152-section-title{
    min-height:32px!important;margin:0 0 5px!important;
  }
  body.er108-employee-clock #page .er152-section-title h3{
    font-size:15px!important;font-weight:790!important;letter-spacing:-.2px!important;
  }
  body.er108-employee-clock #page .er152-section-title span{
    padding:4px 8px!important;font-size:11px!important;color:#236b45!important;
    background:#e2f1e6!important;
  }
  /* Recompose each time-entry as a two-column summary with inline action.
     This removes the tall blank footer of the older card. */
  body.er108-employee-clock #page .er152-entry{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    grid-auto-rows:min-content!important;column-gap:8px!important;row-gap:1px!important;
    padding:11px 12px 10px!important;margin:0 0 9px!important;
    border:1px solid #dfe8df!important;border-left:3px solid #4f9c69!important;
    border-radius:13px!important;box-shadow:0 3px 10px rgba(30,77,44,.035)!important;
    background:#fff!important;min-width:0!important;
  }
  body.er108-employee-clock #page .er152-entry-head{
    grid-column:1/-1!important;grid-row:auto!important;min-height:25px!important;
    margin:0 0 5px!important;align-items:flex-start!important;
  }
  body.er108-employee-clock #page .er152-entry-head h3{
    font-size:14px!important;line-height:19px!important;font-weight:785!important;
    letter-spacing:-.2px!important;
  }
  body.er108-employee-clock #page .er152-status{
    padding:3px 7px!important;min-height:21px!important;max-width:48%!important;
    white-space:normal!important;text-align:center!important;font-size:9px!important;
    line-height:13px!important;border-radius:7px!important;
  }
  body.er108-employee-clock #page .er152-status.pending{
    color:#88591d!important;background:#fff0d6!important;
  }
  body.er108-employee-clock #page .er152-status.approved{
    color:#236b45!important;background:#e7f5e9!important;
  }
  body.er108-employee-clock #page .er152-entry-hours{
    grid-column:1/-1!important;margin:0 0 5px!important;line-height:18px!important;
    font-size:12px!important;color:#526d5d!important;
  }
  body.er108-employee-clock #page .er152-entry-hours strong{
    font-size:19px!important;line-height:20px!important;color:#1e7250!important;
  }
  body.er108-employee-clock #page .er152-entry-meta{
    grid-column:1!important;grid-row:auto!important;border-top:1px solid #ecf1ea!important;
    padding:6px 0 2px!important;margin:0!important;gap:3px 8px!important;
    font-size:10px!important;line-height:14px!important;color:#72897b!important;
  }
  body.er108-employee-clock #page .er152-entry details{
    grid-column:1!important;min-width:0!important;align-self:end!important;
  }
  body.er108-employee-clock #page .er152-entry details summary{
    font-size:11px!important;line-height:17px!important;padding:2px 0!important;
  }
  body.er108-employee-clock #page .er152-entry footer{
    grid-column:2!important;grid-row:3 / span 2!important;
    align-self:end!important;justify-self:end!important;
    flex-direction:column!important;align-items:flex-end!important;gap:3px!important;
    margin:0!important;border:0!important;padding:0!important;min-width:0!important;
  }
  body.er108-employee-clock #page .er152-entry footer small{font-size:9px!important;color:#8ca094!important}
  body.er108-employee-clock #page .er152-entry footer .er152-btn{
    height:33px!important;min-height:33px!important;font-size:10px!important;
    padding:6px 8px!important;line-height:14px!important;background:#eff6f0!important;
    border:1px solid #c9ddce!important;border-radius:8px!important;
  }
  body.er108-employee-clock #page .er152-links{
    gap:6px!important;padding-top:6px!important;
  }
  body.er108-employee-clock #page .er152-links .er152-btn{
    min-height:36px!important;padding:7px 7px!important;font-size:10px!important;
    border-color:#d5e4d6!important;background:#fff!important;
  }
  /* Weekly overview: connected, fine-grained colour cues, not bulky boxes. */
  body.er108-employee-clock #page .er152-heading{
    margin-bottom:8px!important;gap:8px!important;
  }
  body.er108-employee-clock #page .er152-heading h2{
    font-size:19px!important;line-height:22px!important;font-weight:790!important;
  }
  body.er108-employee-clock #page .er152-heading .er152-btn.primary{
    min-height:35px!important;height:35px!important;
    border-radius:9px!important;background:#246c4c!important;font-size:11px!important;
  }
  body.er108-employee-clock #page .er152-week{
    min-height:42px!important;margin-bottom:8px!important;border-radius:11px!important;
    box-shadow:none!important;
  }
  body.er108-employee-clock #page .er152-week strong{
    font-size:12px!important;font-weight:760!important;
  }
  body.er108-employee-clock #page .er152-summary{
    min-height:62px!important;margin-bottom:9px!important;border-radius:11px!important;
    background:#fff!important;border:1px solid #dce7e0!important;
    box-shadow:0 2px 8px rgba(20,71,45,.025)!important;
  }
  body.er108-employee-clock #page .er152-summary>div{
    padding:7px 10px!important;border-right-color:#e0eae3!important;
  }
  body.er108-employee-clock #page .er152-summary>div:first-child{
    background:linear-gradient(180deg,#f3f8ff,#f8fbff)!important;
    border-top:3px solid #5c8fae!important;
  }
  body.er108-employee-clock #page .er152-summary>div:nth-child(2){
    background:linear-gradient(180deg,#eff8ef,#fafdf9)!important;
    border-top:3px solid #5b9a6d!important;
  }
  body.er108-employee-clock #page .er152-summary>div:nth-child(3){
    background:linear-gradient(180deg,#fff7eb,#fffcf6)!important;
    border-top:3px solid #d5a74f!important;
  }
  body.er108-employee-clock #page .er152-summary span{
    font-size:10px!important;color:#61776f!important;
  }
  body.er108-employee-clock #page .er152-summary strong{
    font-size:19px!important;line-height:20px!important;color:#244d3e!important;
  }
  body.er108-employee-clock #page .er152-summary>div:first-child strong{color:#345e86!important}
  body.er108-employee-clock #page .er152-summary>div:nth-child(2) strong{color:#28754a!important}
  body.er108-employee-clock #page .er152-summary>div:nth-child(3) strong{color:#976a23!important}
  body.er108-employee-clock #page .er152-days{
    min-height:58px!important;margin-bottom:9px!important;border-radius:11px!important;padding:3px!important;
  }
  body.er108-employee-clock #page .er152-days button{
    min-height:52px!important;border-radius:8px!important;padding:3px 0!important;
  }
  body.er108-employee-clock #page .er152-days button[aria-pressed="true"]{
    background:#e2f3e5!important;box-shadow:inset 0 0 0 1px #cce2cf!important;
  }
  body.er108-employee-clock #page .er152-days button span{
    font-size:10px!important;line-height:12px!important;color:#657d6d!important;
  }
  body.er108-employee-clock #page .er152-days button b{
    font-size:16px!important;line-height:20px!important;color:#1f5438!important;
  }
  body.er108-employee-clock #page .er152-filters{
    min-height:36px!important;margin-bottom:9px!important;border-radius:10px!important;
  }
  body.er108-employee-clock #page .er152-filters button,
  body.er108-employee-clock #page .er152-filters button[aria-pressed="true"]{
    height:35px!important;min-height:35px!important;font-size:10px!important;
  }
  body.er108-employee-clock #page .er152-date>h3,
  body.er108-employee-clock #page .er152-week-day-title{
    margin:3px 0 6px!important;font-size:12px!important;
  }
  body.er108-employee-clock #page .er152-history{
    min-height:40px!important;border-radius:10px!important;
  }
  body.er108-employee-clock #page .er152-history>summary{
    padding:11px 13px!important;font-size:11px!important;
  }
}
@media (max-width:350px){
  body.er108-employee-clock #page .er152-entry{
    padding:9px 9px 8px!important;column-gap:4px!important;
  }
  body.er108-employee-clock #page .er152-entry-meta{
    gap:2px 5px!important;font-size:9px!important;
  }
  body.er108-employee-clock #page .er152-entry footer .er152-btn{
    font-size:9px!important;padding:6px!important;
  }
  body.er108-employee-clock #page .er152-entry-head h3{font-size:13px!important}
  body.er108-employee-clock #page .er152-heading h2{font-size:17px!important}
}
@media (prefers-reduced-motion:reduce) {
  body.er108-employee-clock #page .er152-tabs button{transition:none!important}
}
}