/* EarthRoster v1452.128 — approved Today/Weekly Timesheet visual redesign.
   The APP HEADER, MOBILE BOTTOM MENU, MESSAGES, TIMESHEET SETTINGS, PAYPAL,
   AUTHENTICATION AND CLOCK/TIMESHEET BEHAVIOUR ARE NOT TARGETED BY THIS FILE.
   Styles are scoped exclusively to the employee Clock content. */
@layer er120 {
@media (max-width:767px) {
  body.er108-employee-clock #page .er152-workspace {
    --er128-forest:#174733; --er128-deep:#193c31;--er128-leaf:#217253;
    --er128-sage:#e9f3e9;--er128-gold:#a97925;--er128-goldsoft:#fff5e2;
    --er128-ink:#203b30;--er128-muted:#708477;--er128-line:#e0e9e0;
    font-family:inherit!important;background:transparent!important;color:var(--er128-ink)!important;
    padding-bottom:16px!important;
  }
  body.er108-employee-clock #page {background:#f7f9f5!important;}
  body.er108-employee-clock #app .content{padding:0 12px 16px!important;background:#f7f9f5!important;}
  /* Pinned clock/timesheet tabs: lean, contrasting and never overlap. */
  body.er108-employee-clock #page .er152-tabs {
    position:sticky!important;top:0!important;z-index:16!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:2px!important;min-height:49px!important;height:49px!important;max-height:none!important;
    background:#f7f9f5!important;padding:0 0 4px!important;margin:0 0 12px!important;
    border:0!important;border-bottom:1px solid #dce7df!important;border-radius:0!important;
    box-shadow:0 3px 8px rgba(21,64,42,.03)!important;
  }
  body.er108-employee-clock #page .er152-tabs button,
  body.er108-employee-clock #page .er152-tabs button[aria-pressed="true"] {
    display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
    height:44px!important;min-height:44px!important;width:100%!important;min-width:0!important;
    border:0!important;border-radius:0!important;border-bottom:3px solid transparent!important;
    background:transparent!important;box-shadow:none!important;
    font-size:12px!important;font-weight:650!important;line-height:16px!important;color:#738a7c!important;
    padding:6px 2px!important;margin:0!important;
  }
  body.er108-employee-clock #page .er152-tabs button[aria-pressed="true"]{
    color:#185f41!important;border-bottom-color:#258355!important;background:linear-gradient(180deg,transparent 0%,#eaf5e9 100%)!important;
  }
  body.er108-employee-clock #page .er152-tabs button svg{width:16px!important;height:16px!important;flex:none!important;}
  body.er108-employee-clock #page .er152-time{gap:0!important;padding-bottom:8px!important;min-width:0!important;}
  body.er108-employee-clock #page .er120-clock-content{padding:0!important;min-width:0!important;}
  /* Shift: wide enough to breathe, without the enormous old banner. */
  body.er108-employee-clock #page .er152-ready {
    position:relative!important;box-sizing:border-box!important;overflow:hidden!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(108px,.72fr)!important;
    grid-template-rows:auto auto auto auto!important;gap:4px 10px!important;
    min-height:142px!important;max-height:none!important;margin:0 0 12px!important;
    padding:15px 14px 14px 19px!important;border:1px solid #dce8db!important;
    border-left:5px solid #32865d!important;border-radius:16px!important;
    background:linear-gradient(112deg,#fff 0%,#fff 64%,#f2f8ef 100%)!important;
    box-shadow:0 4px 14px #214b2d0e!important;align-items:start!important;
  }
  body.er108-employee-clock #page .er152-ready:before{
    content:""!important;position:absolute!important;right:-20px!important;top:-28px!important;
    width:92px!important;height:92px!important;border:1px solid #d9eada!important;
    border-radius:50%!important;background:#ecf5e925!important;pointer-events:none!important;
  }
  body.er108-employee-clock #page .er152-ready .er156-clock-label{
    grid-column:1!important;grid-row:1!important;letter-spacing:1.1px!important;font-size:9px!important;
    font-weight:800!important;line-height:15px!important;color:#28704c!important;
    white-space:normal!important;min-height:0!important;
  }
  body.er108-employee-clock #page .er152-ready>small:first-child{
    grid-column:2!important;grid-row:1!important;justify-self:end!important;
    font-size:10px!important;line-height:15px!important;color:#698674!important;
    white-space:normal!important;text-align:right!important;
  }
  body.er108-employee-clock #page .er152-ready h2{
    grid-column:1!important;grid-row:2!important;font-size:19px!important;font-weight:790!important;
    line-height:24px!important;letter-spacing:-.5px!important;color:#183e30!important;
    min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;
    text-overflow:clip!important;margin:0!important;
  }
  body.er108-employee-clock #page .er152-ready>p{
    grid-column:2!important;grid-row:2!important;justify-self:end!important;
    color:#526c58!important;font-size:11px!important;font-weight:650!important;
    line-height:18px!important;white-space:normal!important;text-align:right!important;margin:0!important;
    min-width:0!important;overflow-wrap:anywhere!important;
  }
  body.er108-employee-clock #page .er152-ready .er156-clock-hint{
    grid-column:1!important;grid-row:3 / span 2!important;align-self:center!important;
    font-size:10px!important;line-height:15px!important;color:#789181!important;
    white-space:normal!important;overflow-wrap:anywhere!important;
    padding:0!important;margin:0!important;min-width:0!important;
  }
  body.er108-employee-clock #page .er152-ready>.er152-btn {
    grid-column:2!important;grid-row:3 / span 2!important;justify-self:stretch!important;align-self:end!important;
    min-height:36px!important;height:auto!important;max-height:none!important;
    display:inline-flex!important;justify-content:center!important;align-items:center!important;gap:6px!important;
    padding:8px 9px!important;border:1px solid #16623e!important;border-radius:10px!important;
    background:linear-gradient(135deg,#2b8658,#155d3c)!important;color:#fff!important;
    box-shadow:0 2px 7px #155d3c25!important;font-size:11px!important;font-weight:730!important;
    white-space:normal!important;text-align:center!important;
  }
  body.er108-employee-clock #page .er152-ready>.er152-btn svg{width:13px!important;height:13px!important;}
  /* Attention banner: warm accent, streamlined, expandable existing content. */
  body.er108-employee-clock #page .er152-attention {
    min-height:0!important;max-height:none!important;margin:0 0 13px!important;
    padding:0!important;background:#fff7e8!important;border:1px solid #edcf92!important;
    border-radius:12px!important;box-shadow:0 1px 5px #b3884020!important;overflow:hidden!important;
  }
  body.er108-employee-clock #page .er152-attention summary {
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;
    min-height:45px!important;padding:10px 12px!important;color:#815a20!important;
    font-size:12px!important;line-height:17px!important;cursor:pointer!important;
  }
  body.er108-employee-clock #page .er152-attention summary b{font-weight:770!important;color:#805820!important;min-width:0!important;}
  body.er108-employee-clock #page .er152-attention summary span{font-size:11px!important;color:#906c34!important;white-space:nowrap!important;}
  body.er108-employee-clock #page .er152-attention p{margin:0 12px 9px!important;color:#805f34!important;font-size:11px!important;line-height:16px!important;}
  body.er108-employee-clock #page .er152-attention .er152-btn {height:auto!important;max-width:100%!important;white-space:normal!important;margin:5px 11px!important;font-size:10px!important;}
  /* Today section and entries — modern editorial hierarchy. */
  body.er108-employee-clock #page .er152-section-title{
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    height:auto!important;min-height:37px!important;margin:0 0 6px!important;padding:1px 2px!important;
  }
  body.er108-employee-clock #page .er152-section-title h3{font-size:16px!important;font-weight:790!important;letter-spacing:-.3px!important;color:#223f30!important;}
  body.er108-employee-clock #page .er152-section-title span{
    border-radius:20px!important;padding:3px 10px!important;background:#e2f0df!important;
    color:#286844!important;font-size:12px!important;font-weight:760!important;
  }
  body.er108-employee-clock #page .er152-entry{
    display:block!important;min-width:0!important;max-width:none!important;
    border:1px solid #dfe8df!important;border-left:4px solid #61a56b!important;border-radius:15px!important;
    background:#fff!important;box-shadow:0 3px 11px #1b53230e!important;
    padding:13px 13px 10px!important;margin:0 0 10px!important;
  }
  body.er108-employee-clock #page .er152-entry-head {
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    gap:7px!important;min-height:25px!important;margin:0 0 6px!important;
  }
  body.er108-employee-clock #page .er152-entry-head>div{min-width:0!important;flex:1!important;}
  body.er108-employee-clock #page .er152-entry-head h3{
    font-size:15px!important;line-height:21px!important;color:#1d3d2c!important;font-weight:760!important;
    min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;
  }
  body.er108-employee-clock #page .er152-status {
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    padding:4px 7px!important;border-radius:7px!important;min-height:24px!important;height:auto!important;
    white-space:nowrap!important;font-size:9px!important;font-weight:730!important;line-height:13px!important;
  }
  body.er108-employee-clock #page .er152-status.pending{color:#866021!important;background:#fff0d6!important;}
  body.er108-employee-clock #page .er152-entry-hours{
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    gap:10px!important;margin:0 0 7px!important;font-size:12px!important;line-height:19px!important;color:#587461!important;
  }
  body.er108-employee-clock #page .er152-entry-hours strong{
    color:#246f42!important;font-weight:800!important;font-size:20px!important;line-height:22px!important;white-space:nowrap!important;
  }
  body.er108-employee-clock #page .er152-entry-meta{
    display:flex!important;align-items:center!important;gap:5px 12px!important;flex-wrap:wrap!important;
    padding:8px 0 7px!important;margin:0!important;border-top:1px solid #edf0eb!important;
    font-size:10px!important;line-height:15px!important;color:#73897b!important;
  }
  body.er108-employee-clock #page .er152-entry-meta svg{width:12px!important;height:12px!important;}
  body.er108-employee-clock #page .er152-entry details {margin:0!important;border:0!important;}
  body.er108-employee-clock #page .er152-entry details summary{
    font-size:11px!important;line-height:18px!important;color:#63816c!important;padding:3px 0!important;
  }
  body.er108-employee-clock #page .er152-entry footer{
    display:flex!important;justify-content:flex-end!important;align-items:center!important;
    margin-top:7px!important;padding:9px 0 0!important;border-top:1px solid #edf0eb!important;
  }
  body.er108-employee-clock #page .er152-entry footer .er152-btn{
    height:33px!important;min-height:33px!important;padding:6px 10px!important;
    background:#f1f8f0!important;border:1px solid #d4e5d3!important;border-radius:9px!important;
    color:#246545!important;font-size:11px!important;font-weight:720!important;box-shadow:none!important;
  }
  body.er108-employee-clock #page .er152-links {
    display:grid!important;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)!important;
    gap:8px!important;padding:7px 0 0!important;margin:0!important;border-top:1px solid #e2eae1!important;
  }
  body.er108-employee-clock #page .er152-links .er152-btn{
    min-width:0!important;min-height:40px!important;height:auto!important;margin:0!important;
    border-radius:10px!important;border:1px solid #cadfc9!important;background:#fff!important;
    color:#285d40!important;font-size:10px!important;line-height:14px!important;font-weight:700!important;
    padding:9px 5px!important;white-space:normal!important;overflow-wrap:anywhere!important;
  }
  /* Timesheet title, header, navigation, summary and week/day strip. */
  body.er108-employee-clock #page .er152-heading{
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;
    gap:12px!important;margin:0 0 10px!important;padding:0 2px!important;min-width:0!important;
  }
  body.er108-employee-clock #page .er152-heading>div{min-width:0!important;}
  body.er108-employee-clock #page .er152-heading small{
    font-size:9px!important;line-height:14px!important;letter-spacing:1.3px!important;font-weight:800!important;color:#52805d!important;
  }
  body.er108-employee-clock #page .er152-heading h2{
    font-size:19px!important;line-height:25px!important;font-weight:790!important;letter-spacing:-.55px!important;color:#1e4030!important;
    white-space:normal!important;overflow-wrap:anywhere!important;margin:0!important;
  }
  body.er108-employee-clock #page .er152-heading .er152-btn.primary{
    flex:0 0 auto!important;height:37px!important;min-height:37px!important;padding:8px 11px!important;
    color:white!important;background:linear-gradient(130deg,#288450,#145d3b)!important;
    border:1px solid #155f3a!important;border-radius:10px!important;
    font-weight:740!important;font-size:11px!important;white-space:nowrap!important;
  }
  body.er108-employee-clock #page .er152-week{
    display:grid!important;grid-template-columns:40px minmax(0,1fr) 40px!important;align-items:center!important;
    min-height:46px!important;height:auto!important;gap:3px!important;margin:0 0 10px!important;
    border:1px solid #dfe9df!important;background:#fff!important;box-shadow:0 2px 7px #195a3310!important;
    border-radius:13px!important;padding:2px 4px!important;
  }
  body.er108-employee-clock #page .er152-week strong{
    min-width:0!important;line-height:19px!important;color:#244333!important;
    white-space:normal!important;text-align:center!important;font-size:12px!important;font-weight:730!important;
  }
  body.er108-employee-clock #page .er152-week button{
    border:0!important;background:transparent!important;border-radius:9px!important;
    width:38px!important;height:40px!important;min-height:40px!important;padding:10px!important;
    color:#267653!important;
  }
  body.er108-employee-clock #page .er152-summary{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;
    height:auto!important;min-height:67px!important;margin:0 0 10px!important;padding:0!important;
    border:1px solid #d9e7d9!important;border-radius:13px!important;
    background:linear-gradient(125deg,#eff7ed,#e4f1e6)!important;overflow:hidden!important;
  }
  body.er108-employee-clock #page .er152-summary>div{
    display:flex!important;flex-direction:column!important;justify-content:center!important;gap:3px!important;
    min-width:0!important;padding:9px 10px!important;background:transparent!important;
    border:0!important;border-right:1px solid #d4e4d8!important;border-radius:0!important;box-shadow:none!important;
  }
  body.er108-employee-clock #page .er152-summary>div:last-child{border-right:0!important;}
  body.er108-employee-clock #page .er152-summary span{font-size:10px!important;line-height:14px!important;color:#628072!important;font-weight:610!important;}
  body.er108-employee-clock #page .er152-summary strong{font-size:20px!important;line-height:23px!important;color:#1c5538!important;font-weight:820!important;letter-spacing:-.5px!important;}
  body.er108-employee-clock #page .er152-days{
    display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:0!important;
    border:1px solid #dfe8df!important;border-radius:13px!important;overflow:hidden!important;
    background:white!important;min-height:67px!important;height:auto!important;max-width:100%!important;
    margin:0 0 10px!important;padding:4px!important;
  }
  body.er108-employee-clock #page .er152-days button{
    min-width:0!important;width:100%!important;min-height:60px!important;height:auto!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    border:0!important;border-radius:9px!important;background:transparent!important;
    box-shadow:none!important;margin:0!important;padding:4px 0!important;
  }
  body.er108-employee-clock #page .er152-days button[aria-pressed="true"]{
    background:linear-gradient(180deg,#e6f4e8,#d9ecdd)!important;
  }
  body.er108-employee-clock #page .er152-days button>*{min-width:0!important;max-width:100%!important;}
  body.er108-employee-clock #page .er152-days button small{color:#839c8b!important;font-size:9px!important;line-height:11px!important;white-space:nowrap!important;}
  body.er108-employee-clock #page .er152-days button strong{color:#26533c!important;font-size:18px!important;line-height:23px!important;}
  body.er108-employee-clock #page .er152-filters{
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;
    min-height:40px!important;height:auto!important;margin:0 0 10px!important;
    border:1px solid #dfe8df!important;border-radius:12px!important;overflow:hidden!important;
    background:#fff!important;padding:0 3px!important;box-shadow:none!important;
  }
  body.er108-employee-clock #page .er152-filters button,
  body.er108-employee-clock #page .er152-filters button[aria-pressed="true"]{
    min-height:38px!important;height:38px!important;min-width:0!important;
    margin:0!important;padding:7px 2px!important;background:transparent!important;
    border:0!important;border-radius:0!important;border-bottom:3px solid transparent!important;
    box-shadow:none!important;color:#76897c!important;font-size:10px!important;font-weight:650!important;
  }
  body.er108-employee-clock #page .er152-filters button[aria-pressed="true"]{
    color:#196d47!important;border-bottom-color:#238956!important;
    background:linear-gradient(180deg,#eef8ef 30%,#e3f3e4)!important;font-weight:770!important;
  }
  body.er108-employee-clock #page .er152-date{
    padding:0!important;margin:0!important;border:0!important;background:transparent!important;
  }
  body.er108-employee-clock #page .er152-date>h3,
  body.er108-employee-clock #page .er152-week-day-title {
    font-size:13px!important;font-weight:760!important;color:#4d6957!important;
    line-height:20px!important;margin:3px 0 8px!important;
  }
  body.er108-employee-clock #page .er152-history{
    min-height:45px!important;border:1px solid #dfe8df!important;border-radius:12px!important;
    background:#fff!important;box-shadow:0 2px 7px #21472b0b!important;margin:0 0 8px!important;
  }
  body.er108-employee-clock #page .er152-history>summary{
    font-size:12px!important;font-weight:760!important;color:#2e503c!important;padding:13px 14px!important;
  }
  body.er108-employee-clock #page .er152-empty{padding:15px 8px!important;border:0!important;background:transparent!important;}
}
@media (max-width:767px){
/* No upcoming shift state — reduce the banner and avoid side-by-side text collisions. */
  body.er108-employee-clock #page .er152-ready:has(.er156-clock-label:empty):not(:has(>.er152-btn)){
    display:grid!important;grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto auto!important;gap:4px!important;
    min-height:0!important;padding:12px 14px!important;
  }
  body.er108-employee-clock #page .er152-ready:has(.er156-clock-label:empty):not(:has(>.er152-btn)) .er156-clock-label{display:none!important;}
  body.er108-employee-clock #page .er152-ready:has(.er156-clock-label:empty):not(:has(>.er152-btn))>small:first-child{
    grid-column:1!important;grid-row:1!important;justify-self:start!important;text-align:left!important;
  }
  body.er108-employee-clock #page .er152-ready:has(.er156-clock-label:empty):not(:has(>.er152-btn)) h2{
    grid-column:1!important;grid-row:2!important;line-height:23px!important;
  }
  body.er108-employee-clock #page .er152-ready:has(.er156-clock-label:empty):not(:has(>.er152-btn))>p{
    grid-column:1!important;grid-row:3!important;justify-self:start!important;text-align:left!important;
  }
  body.er108-employee-clock #page .er152-ready:has(.er156-clock-label:empty):not(:has(>.er152-btn)) .er156-clock-hint{
    grid-column:1!important;grid-row:4!important;
  }
}
@media (max-width:350px){
 body.er108-employee-clock #page .er152-ready{grid-template-columns:minmax(0,1fr) minmax(95px,.65fr)!important;padding:12px!important;gap:3px 6px!important;}
 body.er108-employee-clock #page .er152-ready h2{font-size:16px!important;line-height:20px!important;}
 body.er108-employee-clock #page .er152-ready>p{font-size:10px!important;}
 body.er108-employee-clock #page .er152-week strong{font-size:11px!important;}
 body.er108-employee-clock #page .er152-status{font-size:8px!important;}
 body.er108-employee-clock #page .er152-links .er152-btn{font-size:9px!important;}
}
}