/* EarthRoster V1452.133 — Clock spacing and standout ready-card polish.
   Scope: employee Clock content only.
   Preserves original top header, bottom nav, Messages, Timesheet Settings,
   PayPal/billing logic, and all Clock behaviour. */
@layer er120 {
@media (max-width:767px) {
  body.er108-employee-clock #page .er152-workspace {
    --er133-forest:#173d31;
    --er133-green:#1f7a4e;
    --er133-green-strong:#2f9460;
    --er133-green-soft:#eaf5ec;
    --er133-green-soft-2:#dff0e5;
    --er133-amber:#8f6120;
    --er133-amber-soft:#fff6e5;
    --er133-amber-line:#ebcf95;
    --er133-line:#d9e6dc;
    --er133-muted:#698072;
  }

  /* 1) READY TO CLOCK IN card only: slightly larger, brighter and more deliberate. */
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn) {
    min-height:128px!important;
    margin:0 0 14px!important;
    padding:16px 16px 15px 18px!important;
    border:1px solid #cde3d3!important;
    border-left:5px solid var(--er133-green)!important;
    border-radius:14px!important;
    background:linear-gradient(118deg,#ffffff 0%,#f6fbf7 46%,#e4f4e9 100%)!important;
    box-shadow:0 6px 16px rgba(21,73,46,.07)!important;
    gap:4px 10px!important;
  }
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn)::before {
    right:-28px!important;top:-26px!important;width:104px!important;height:104px!important;
    border-color:#d4e8d8!important;background:rgba(255,255,255,.16)!important;
  }
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn) .er156-clock-label {
    color:#236d49!important;font-size:9px!important;letter-spacing:1.2px!important;
  }
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn)>small:first-child {
    color:#6c8476!important;font-size:10px!important;
  }
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn) h2 {
    font-size:18px!important;line-height:23px!important;font-weight:800!important;
    color:#15382b!important;
  }
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn)>p {
    font-size:12px!important;line-height:17px!important;font-weight:690!important;
    color:#436352!important;
  }
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn) .er156-clock-hint {
    font-size:10px!important;line-height:15px!important;color:#6a8172!important;
  }
  body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn)>.er152-btn {
    min-height:38px!important;border-radius:10px!important;padding:8px 10px!important;
    background:linear-gradient(135deg,#e9f6ec 0%,#dcf0e3 100%)!important;
    color:#1b6a44!important;border:1px solid #afd1ba!important;
    box-shadow:0 2px 6px rgba(32,95,62,.08)!important;font-size:11px!important;
    font-weight:760!important;
  }

  /* 2) Keep the time-entry notice fully visible and clearly separated. */
  body.er108-employee-clock #page .er152-attention {
    position:relative!important;z-index:0!important;overflow:hidden!important;
    margin:0 0 12px!important;padding:0!important;
    border:1px solid var(--er133-amber-line)!important;border-radius:12px!important;
    background:linear-gradient(180deg,#fffaf0 0%,var(--er133-amber-soft) 100%)!important;
    box-shadow:0 2px 7px rgba(151,105,32,.06)!important;
  }
  body.er108-employee-clock #page .er152-attention summary {
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    gap:10px!important;min-height:48px!important;padding:11px 13px!important;
    font-size:12px!important;line-height:17px!important;color:var(--er133-amber)!important;
  }
  body.er108-employee-clock #page .er152-attention summary b {
    font-weight:780!important;color:#85571d!important;min-width:0!important;
  }
  body.er108-employee-clock #page .er152-attention summary span {
    font-size:11px!important;color:#946e2a!important;white-space:nowrap!important;
    flex:none!important;
  }
  body.er108-employee-clock #page .er152-attention p {
    margin:0 13px 10px!important;font-size:11px!important;line-height:16px!important;
    color:#7a5b2a!important;
  }
  body.er108-employee-clock #page .er152-attention .er152-btn {
    margin:4px 12px 12px!important;height:auto!important;max-width:calc(100% - 24px)!important;
    white-space:normal!important;font-size:10px!important;
  }

  /* 3) Give Today's entries a clear start below the notice; no visual collision. */
  body.er108-employee-clock #page .er152-section-title {
    min-height:34px!important;margin:4px 0 7px!important;padding-top:0!important;
    position:relative!important;
  }
  body.er108-employee-clock #page .er152-section-title h3 {
    font-size:15px!important;line-height:20px!important;font-weight:790!important;
    color:#214234!important;
  }
  body.er108-employee-clock #page .er152-section-title span {
    padding:4px 8px!important;border-radius:999px!important;
    background:#e4f2e7!important;color:#246e48!important;font-size:11px!important;
  }

  /* 4) Keep Today entry cards neat and professional. */
  body.er108-employee-clock #page .er152-time:not(.er130-timesheets) .er152-entry {
    margin:0 0 10px!important;border-color:#dbe6dd!important;border-left-color:#4b9866!important;
    box-shadow:0 3px 10px rgba(22,70,45,.035)!important;
  }
  body.er108-employee-clock #page .er152-time:not(.er130-timesheets) .er152-entry-head h3 {
    font-size:14px!important;line-height:19px!important;font-weight:770!important;
  }
  body.er108-employee-clock #page .er152-time:not(.er130-timesheets) .er152-status.pending {
    background:#fff0d6!important;border:1px solid #f0d8ab!important;color:#8a5b1d!important;
  }
}
}