/* ════════════════════════════════════════════════════════════════
   EAM Dashboard Redesign — loads after frontend.css, overrides look
   only (no markup/JS changes needed). Plus Jakarta Sans font, soft shadows,
   accent-driven cards, bigger real employee photo.
   ════════════════════════════════════════════════════════════════ */

.eam-emp-wrap {
    --eamx-ink:      #14141c;
    --eamx-sub:      #6b7280;
    --eamx-line:     #dde1e8; /* darkened from #ececf2 (1.2:1, near-invisible) so cards/borders read as defined, not flat */
    --eamx-bg:       #f6f6f9;
    --eamx-accent:   #6d5ef0;
    --eamx-accent2:  #4338ca;
    --eamx-green:    #15a36a;
    --eamx-green-bg: #e9faf2;
    --eamx-orange:   #e8730f;
    --eamx-orange-bg:#fff3e8;
    --eamx-blue:     #2f6fed;
    --eamx-blue-bg:  #eef3ff;
    --eamx-red:      #e23e4f;
    --eamx-red-bg:   #fdecee;
    --eamx-card-shadow: 0 1px 2px rgba(20,20,28,.04), 0 8px 24px -12px rgba(20,20,28,.10);
    background: var(--eamx-bg) !important;
    max-width: 1440px !important;
}

/* Match the whole page background to the card background so there's no
   white strip on the left/right of the centered content on wide screens */
body:has(.eam-emp-wrap) {
    background: #f6f6f9 !important;
}

/* ── Header card ── */
.eam-emp-wrap .eam-emp-header {
    background: #fff !important;
    border: 1px solid var(--eamx-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(20,20,28,.04) !important;
    padding: 18px 22px !important;
    gap: 16px !important;
}

/* Bigger, real photo with soft accent ring */
.eam-emp-wrap .eam-emp-avatar {
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, var(--eamx-accent), var(--eamx-accent2)) !important;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--eamx-line), 0 6px 16px -6px rgba(109,94,240,.55) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #fff !important;
    flex-shrink: 0;
}
.eam-emp-wrap .eam-emp-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
}
.eam-emp-wrap .eam-avatar-status-dot {
    width: 14px !important;
    height: 14px !important;
    border: 3px solid #fff !important;
    bottom: -2px !important;
    right: -2px !important;
}
.eam-emp-wrap .eam-avatar-status-dot--working { background: var(--eamx-green) !important; }
.eam-emp-wrap .eam-avatar-status-dot--done    { background: var(--eamx-blue) !important; }

.eam-emp-wrap .eam-emp-header-info h2 {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: var(--eamx-ink) !important;
    letter-spacing: -0.3px !important;
}
.eam-emp-wrap .eam-emp-header-info p {
    font-size: 12.5px !important;
    color: var(--eamx-sub) !important;
    font-weight: 500 !important;
}

.eam-emp-wrap .eam-emp-role-row { gap: 6px !important; margin-top: 4px; }
.eam-emp-wrap .eam-emp-role-badge,
.eam-emp-wrap .eam-emp-desig-badge,
.eam-emp-wrap .eam-emp-roleno-badge {
    border-radius: 100px !important;
    padding: 4px 11px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border: none !important;
}
.eam-emp-wrap .eam-emp-role-badge.eam-role-employee { background: var(--eamx-blue-bg) !important; color: var(--eamx-blue) !important; }
.eam-emp-wrap .eam-emp-role-badge.eam-role-intern   { background: #fdeefc !important; color: #a4279c !important; }
.eam-emp-wrap .eam-emp-roleno-badge { background: var(--eamx-bg) !important; color: var(--eamx-sub) !important; }

/* ── Department badge — was a looping rotating-gradient border + glow
   pulse + shine sweep (3 infinite animations stacked on one small
   badge), which read as flashy/gamified rather than a serious HR tool.
   Kept the same one-time pop-in entrance, dropped everything infinite.
   Class names/markup untouched, so no JS/PHP changes needed. ── */
.eam-emp-wrap .eam-dept-badge-wrap {
    display: inline-flex;
    position: relative;
    border-radius: 100px;
    padding: 1.5px;
    overflow: hidden;
    animation: eamPopIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
.eam-emp-wrap .eam-dept-badge-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100px;
    background: var(--eamx-line);
    z-index: 0;
}

.eam-emp-wrap .eam-emp-desig-badge {
    position: relative !important;
    z-index: 1;
    background: var(--eamx-blue-bg) !important;
    color: var(--eamx-blue) !important;
    font-weight: 700 !important;
}

.eam-emp-wrap .eam-emp-clock {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--eamx-ink) !important;
    font-variant-numeric: tabular-nums;
}

/* ── Check-in card ── */
.eam-emp-wrap .eam-emp-checkin-card {
    background: #fff !important;
    border: 1px solid var(--eamx-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--eamx-card-shadow) !important;
    padding: 22px 26px !important;
    margin-top: 16px !important;
}

.eam-emp-wrap .eam-emp-action-btn {
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    padding: 11px 22px !important;
    border: none !important;
}
.eam-emp-wrap .eam-emp-btn-checkin  { background: linear-gradient(135deg,#1bb579,#0f9d63) !important; box-shadow: 0 6px 16px -4px rgba(15,157,99,.45) !important; }
.eam-emp-wrap .eam-emp-btn-checkout { background: linear-gradient(135deg,#f0596b,#dc2f43) !important; box-shadow: 0 6px 16px -4px rgba(220,47,67,.45) !important; }

.eam-emp-wrap .eam-emp-done-badge {
    background: var(--eamx-green-bg) !important;
    color: var(--eamx-green) !important;
    border: none !important;
    border-radius: 100px !important;
    font-weight: 700 !important;
}
.eam-emp-wrap .eam-emp-done-item strong { color: var(--eamx-ink) !important; }

/* ── Section cards (leaves / summary / records) ── */
.eam-emp-wrap .eam-emp-section {
    background: #fff !important;
    border: 1px solid var(--eamx-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--eamx-card-shadow) !important;
    padding: 18px 20px !important;
    margin-top: 16px !important;
}
.eam-emp-wrap .eam-emp-section-head h3 {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: var(--eamx-ink) !important;
}

/* ── Stats row ── */
.eam-emp-wrap .eam-emp-stats-row { gap: 14px !important; }
.eam-emp-wrap .eam-emp-stat {
    border-radius: 16px !important;
    border: none !important;
    padding: 18px 16px !important;
}
.eam-emp-wrap .eam-emp-stat-green  { background: var(--eamx-green-bg)  !important; }
.eam-emp-wrap .eam-emp-stat-orange { background: var(--eamx-orange-bg) !important; }
.eam-emp-wrap .eam-emp-stat-blue   { background: var(--eamx-blue-bg)   !important; }
.eam-emp-wrap .eam-emp-stat-green  .eam-emp-stat-num,
.eam-emp-wrap .eam-emp-stat-green  .eam-emp-stat-label { color: var(--eamx-green)  !important; }
.eam-emp-wrap .eam-emp-stat-orange .eam-emp-stat-num,
.eam-emp-wrap .eam-emp-stat-orange .eam-emp-stat-label { color: var(--eamx-orange) !important; }
.eam-emp-wrap .eam-emp-stat-blue   .eam-emp-stat-num,
.eam-emp-wrap .eam-emp-stat-blue   .eam-emp-stat-label { color: var(--eamx-blue)   !important; }
.eam-emp-wrap .eam-emp-stat-num   { font-size: 30px !important; font-weight: 800 !important; }
.eam-emp-wrap .eam-emp-stat-label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .5px !important; }

/* ── Tables ── */
.eam-emp-wrap .eam-emp-table { border-spacing: 0 !important; }
.eam-emp-wrap .eam-emp-table thead th {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: var(--eamx-sub) !important;
    letter-spacing: .6px !important;
    border-bottom: 1px solid var(--eamx-line) !important;
    padding: 0 10px 10px !important;
}
.eam-emp-wrap .eam-emp-table tbody td {
    padding: 13px 10px !important;
    border-bottom: 1px solid var(--eamx-line) !important;
    font-size: 13.5px !important;
    color: var(--eamx-ink) !important;
}
.eam-emp-wrap .eam-emp-table tbody tr:hover { background: var(--eamx-bg) !important; }
.eam-emp-wrap .eam-emp-table tbody tr:last-child td { border-bottom: none !important; }

.eam-emp-wrap .eam-badge {
    border-radius: 100px !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 4px 11px !important;
}
.eam-emp-wrap .eam-badge.approved    { background: var(--eamx-green-bg)  !important; color: var(--eamx-green)  !important; }
.eam-emp-wrap .eam-badge.rejected    { background: #fdecee !important; color: var(--eamx-red) !important; }
.eam-emp-wrap .eam-badge.pending     { background: var(--eamx-orange-bg) !important; color: var(--eamx-orange) !important; }
.eam-emp-wrap .eam-badge.present     { background: var(--eamx-green-bg)  !important; color: var(--eamx-green)  !important; }
.eam-emp-wrap .eam-badge.short_hours { background: var(--eamx-orange-bg) !important; color: var(--eamx-orange) !important; }
.eam-emp-wrap .eam-badge.absent      { background: #fdecee !important; color: var(--eamx-red) !important; }
.eam-emp-wrap .eam-badge.leave       { background: #f1eefe !important; color: var(--eamx-accent) !important; }
.eam-emp-wrap .eam-badge.working     { background: var(--eamx-blue-bg)   !important; color: var(--eamx-blue)   !important; }

/* ── Filter form ── */
.eam-emp-wrap .eam-emp-filter select {
    border-radius: 10px !important;
    border: 1px solid var(--eamx-line) !important;
    font-size: 12.5px !important;
    padding: 7px 10px !important;
}
.eam-emp-wrap .eam-emp-filter-btn {
    border-radius: 10px !important;
    border: 1px solid var(--eamx-accent) !important;
    color: var(--eamx-accent) !important;
    background: #fff !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    padding: 7px 16px !important;
}
.eam-emp-wrap .eam-emp-filter-btn:hover {
    background: var(--eamx-accent) !important;
    color: #fff !important;
}

@media (max-width: 600px) {
    .eam-emp-wrap .eam-emp-header { flex-wrap: wrap; }
    .eam-emp-wrap .eam-emp-clock { font-size: 19px !important; }
    .eam-emp-wrap .eam-emp-stats-row { grid-template-columns: 1fr !important; }
}

/* ── Month nav (single scroll control for merged Attendance & Leaves) ── */
.eam-emp-wrap .eam-month-nav-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.eam-emp-wrap .eam-month-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}
.eam-emp-wrap .eam-month-nav-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--eamx-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--eamx-sub);
    text-decoration: none;
    font-size: 17px;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s;
}
.eam-emp-wrap .eam-month-nav-btn:hover {
    background: var(--eamx-accent);
    border-color: var(--eamx-accent);
    color: #fff;
}
.eam-emp-wrap .eam-month-nav-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--eamx-sub);
    min-width: 86px;
    text-align: center;
}

/* ── Ring summary ── */
.eam-emp-wrap .eam-ring-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 4px 2px 18px;
}
.eam-emp-wrap .eam-ring-svg circle { transition: stroke-dasharray .3s ease; }
.eam-emp-wrap .eam-ring-num { font-size: 18px; font-weight: 800; fill: var(--eamx-ink); font-family: var(--eam-font); }
.eam-emp-wrap .eam-ring-sub { font-size: 9px; fill: var(--eamx-sub); font-family: var(--eam-font); }
.eam-emp-wrap .eam-ring-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.eam-emp-wrap .eam-ring-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.eam-emp-wrap .eam-ring-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.eam-emp-wrap .eam-ring-legend-label { color: var(--eamx-sub); }
.eam-emp-wrap .eam-ring-legend-val { font-weight: 700; color: var(--eamx-ink); margin-left: auto; }
.eam-emp-wrap .eam-ring-legend-net { font-size: 13px; color: var(--eamx-sub); margin-top: 4px; }
.eam-emp-wrap .eam-ring-legend-net strong { color: var(--eamx-ink); font-size: 15px; }

/* ── Header animations (avatar entrance/hover, status ping, badge pop-in) ── */
@keyframes eamScaleIn { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: scale(1); } }
@keyframes eamPopIn { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes eamWiggle {
    0%, 85%, 100% { transform: rotate(0deg); }
    88% { transform: rotate(-12deg); }
    91% { transform: rotate(10deg); }
    94% { transform: rotate(-6deg); }
    97% { transform: rotate(0deg); }
}
@keyframes eamPing { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.2); opacity: 0; } }

.eam-emp-wrap .eam-emp-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    animation: eamScaleIn .45s cubic-bezier(.34,1.56,.64,1) both;
}
.eam-emp-wrap .eam-emp-avatar { position: relative; overflow: hidden; transition: transform .18s; cursor: default; }
.eam-emp-wrap .eam-emp-avatar-overlay {
    position: absolute; inset: 0; border-radius: inherit;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .18s;
    cursor: pointer;
}
.eam-emp-wrap .eam-emp-avatar-overlay i { color: #fff !important; font-size: 20px !important; }
.eam-emp-wrap .eam-emp-avatar-wrap:hover .eam-emp-avatar-overlay { opacity: 1; }
.eam-emp-wrap .eam-emp-avatar-wrap:hover .eam-emp-avatar { transform: scale(1.03); }

.eam-emp-wrap .eam-avatar-status-dot { position: relative; overflow: visible !important; }
.eam-emp-wrap .eam-avatar-status-ping {
    position: absolute; inset: 0; border-radius: 50%;
    background: var(--eamx-green);
    animation: eamPing 1.8s cubic-bezier(0,0,.2,1) infinite;
}

.eam-emp-wrap .eam-emp-role-badge,
.eam-emp-wrap .eam-emp-desig-badge,
.eam-emp-wrap .eam-emp-roleno-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    animation: eamPopIn .5s cubic-bezier(.34,1.56,.64,1) both;
    transition: transform .15s;
}
.eam-emp-wrap .eam-emp-role-badge:hover,
.eam-emp-wrap .eam-emp-desig-badge:hover,
.eam-emp-wrap .eam-emp-roleno-badge:hover { transform: translateY(-1px); }
.eam-emp-wrap .eam-badge-icon { display: inline-block; animation: eamWiggle 3.5s ease-in-out infinite; }

.eam-emp-wrap .eam-emp-clock-wrap { text-align: right !important; flex-shrink: 0; }
.eam-emp-wrap .eam-emp-clock-label {
    display: block;
    font-size: 11px !important;
    color: var(--eamx-sub) !important;
    font-weight: 600 !important;
    margin-bottom: 2px;
}

/* Employee Details list page — width matched to Dashboard page so the
   shared header stays consistent across pages */
.eam-emp-wrap.eam-emp-list-page {
    max-width: 1440px !important;
}
.eam-emp-wrap .eam-row-list { display: flex; flex-direction: column; gap: 8px; }
.eam-emp-wrap .eam-row-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--eamx-line);
    border-radius: 12px;
    padding: 12px 14px;
    transition: border-color .15s, box-shadow .15s;
}
.eam-emp-wrap .eam-row-item:hover {
    border-color: #d8d8e2;
    box-shadow: 0 2px 8px rgba(20,20,28,.05);
}
.eam-emp-wrap .eam-row-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}
.eam-emp-wrap .eam-row-icon--ok   { background: var(--eamx-green-bg);  color: var(--eamx-green); }
.eam-emp-wrap .eam-row-icon--warn { background: var(--eamx-orange-bg); color: var(--eamx-orange); }
.eam-emp-wrap .eam-row-icon--leave { background: #f1eefe; color: var(--eamx-accent); }
.eam-emp-wrap .eam-row-icon--absent { background: var(--eamx-red-bg); color: var(--eamx-red); }
.eam-emp-wrap .eam-row-main { flex: 1; min-width: 0; }
.eam-emp-wrap .eam-row-date { font-size: 13px; font-weight: 700; color: var(--eamx-ink); }
.eam-emp-wrap .eam-row-day  { font-weight: 400; color: var(--eamx-sub); margin-left: 4px; }
.eam-emp-wrap .eam-row-sub  { font-size: 12px; color: var(--eamx-sub); margin-top: 2px; }
.eam-emp-wrap .eam-row-hrs  { font-size: 12px; color: var(--eamx-sub); margin-right: 4px; flex-shrink: 0; }

/* ── Leave purpose summary (consolidated, one place per month) ── */
.eam-emp-wrap .eam-leave-summary {
    background: #f6f3ff;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.eam-emp-wrap .eam-leave-summary-head {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--eamx-accent2);
    display: flex;
    align-items: center;
    gap: 6px;
}
.eam-emp-wrap .eam-leave-summary-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}
.eam-emp-wrap .eam-leave-summary-date {
    font-weight: 700;
    color: var(--eamx-ink);
    min-width: 92px;
    flex-shrink: 0;
}
.eam-emp-wrap .eam-leave-summary-reason {
    color: var(--eamx-sub);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Polish the "Currently Working" progress bar (overrides inline styles) ── */
.eam-emp-wrap #eam-countdown-bar {
    background: linear-gradient(90deg, var(--eamx-accent), #4338ca) !important;
    height: 8px !important;
    border-radius: 100px !important;
}
.eam-emp-wrap .eam-emp-checkin-active > div[style*="background:#e5e7eb"] {
    width: 100% !important;
    background: var(--eamx-bg) !important;
    height: 8px !important;
}
.eam-emp-wrap #eam-countdown-text {
    font-size: 12px !important;
    color: var(--eamx-sub) !important;
}

/* ── Font size boost — consistent, more readable sizes across all pages ── */
.eam-emp-wrap { font-size: 14px !important; }
.eam-emp-wrap .eam-emp-header-info p { font-size: 13.5px !important; }
.eam-emp-wrap .eam-emp-role-badge,
.eam-emp-wrap .eam-emp-desig-badge,
.eam-emp-wrap .eam-emp-roleno-badge { font-size: 12.5px !important; }
.eam-emp-wrap .eam-emp-action-btn { font-size: 14.5px !important; }
.eam-emp-wrap .eam-emp-section-head h3 { font-size: 16px !important; }
.eam-emp-wrap .eam-emp-stat-label { font-size: 12px !important; }
.eam-emp-wrap .eam-emp-table thead th { font-size: 11.5px !important; }
.eam-emp-wrap .eam-emp-table tbody td { font-size: 14.5px !important; }
.eam-emp-wrap .eam-badge { font-size: 12.5px !important; }
.eam-emp-wrap .eam-emp-filter select,
.eam-emp-wrap .eam-emp-filter-btn { font-size: 13.5px !important; }
.eam-emp-wrap .eam-month-nav-btn { font-size: 18px !important; }
.eam-emp-wrap .eam-month-nav-label { font-size: 13.5px !important; }
.eam-emp-wrap .eam-ring-num { font-size: 20px !important; }
.eam-emp-wrap .eam-ring-sub { font-size: 10px !important; }
.eam-emp-wrap .eam-ring-legend-row { font-size: 13.5px !important; }
.eam-emp-wrap .eam-ring-legend-net { font-size: 14px !important; }
.eam-emp-wrap .eam-ring-legend-net strong { font-size: 16px !important; }
.eam-emp-wrap .eam-row-icon { font-size: 17px !important; }
.eam-emp-wrap .eam-row-date { font-size: 14px !important; }
.eam-emp-wrap .eam-row-sub { font-size: 13px !important; }
.eam-emp-wrap .eam-row-hrs { font-size: 13px !important; }
.eam-emp-wrap .eam-leave-summary-head { font-size: 13.5px !important; }
.eam-emp-wrap .eam-leave-summary-row { font-size: 13px !important; }
.eam-emp-wrap #eam-countdown-text { font-size: 13px !important; }

/* ════════════════════════════════════════════════════════════════
   Today-card redesign — icons instead of emoji, live pulse dot,
   classes instead of inline styles (v2 refresh)
   ════════════════════════════════════════════════════════════════ */
.eamx-card{
    background:#fff;border-radius:16px;overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.07);
    display:flex;flex-direction:column;
    transition:transform .2s ease, box-shadow .2s ease;
}
.eamx-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 26px -8px rgba(20,20,28,.18);
}
.eamx-card-photo{height:120px;position:relative;overflow:hidden;}
.eamx-card-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.eamx-card-initial{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    font-size:42px;font-weight:800;color:rgba(255,255,255,.92);font-family:'Plus Jakarta Sans',sans-serif;
}
.eamx-card-ribbon{
    position:absolute;bottom:0;left:0;right:0;text-align:center;
    font-size:10.5px;font-weight:700;padding:5px 6px;letter-spacing:.2px;
    display:flex;align-items:center;justify-content:center;gap:5px;
}
.eamx-card-ribbon i{font-size:12px;}
.eamx-card-notice{
    position:absolute;top:7px;right:7px;background:#fef9c3;color:#a16207;
    font-size:9.5px;font-weight:700;padding:3px 7px;border-radius:8px;
    display:flex;align-items:center;gap:3px;
}

/* Live pulse — top-left of photo, shows real-time status at a glance */
.eamx-pulse{
    position:absolute;top:9px;left:9px;width:11px;height:11px;border-radius:50%;
    border:2px solid rgba(255,255,255,.9);z-index:2;
}
.eamx-pulse-present{background:#16a34a;}
.eamx-pulse-present::after{
    content:'';position:absolute;inset:-4px;border-radius:50%;
    border:2px solid #16a34a;opacity:.55;animation:eamxPulseRing 1.8s ease-out infinite;
}
.eamx-pulse-absent{background:#dc2626;}
.eamx-pulse-leave{background:#d97706;}
@keyframes eamxPulseRing{
    0%{transform:scale(.6);opacity:.6;}
    100%{transform:scale(1.9);opacity:0;}
}
@media (prefers-reduced-motion: reduce){
    .eamx-pulse-present::after{animation:none;}
}

.eamx-card-info{padding:10px 12px;flex:1;}
.eamx-card-name{
    font-weight:700;font-size:13px;color:#1e293b;margin-bottom:6px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.eamx-card-times{font-size:11px;color:#64748b;line-height:1.8;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.eamx-card-times i{font-size:13px;}
.eamx-card-hours{font-size:11px;color:#047857;font-weight:600;margin-top:2px;display:flex;align-items:center;gap:4px;} /* darkened from #059669 (3.77:1) for AA */
.eamx-card-hours i{font-size:12px;}
.eamx-card-leave-reason{font-size:11px;color:#92400e;}

/* Stat buttons — icon + label spacing (icons replace emoji) */
.eam-summary-stats .eam-stat-btn{display:inline-flex;align-items:center;gap:6px;}
.eam-summary-stats .eam-stat-btn i{font-size:15px;}
.eam-period-tabs .eam-period-btn{display:inline-flex;align-items:center;gap:6px;}
.eam-period-tabs .eam-period-btn i{font-size:15px;}