@import url('https://fonts.googleapis.com/css2?family=Sora:ital,wght@0,500;0,600;0,700;0,800;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --eam-green:      #10b981;
    --eam-red:        #ef4444;
    --eam-blue:       #3b82f6;
    --eam-orange:     #f97316;
    --eam-gray:       #6b7280;
    --eam-bg:         #f1f5f9;
    --eam-white:      #ffffff;
    --eam-radius:     14px;
    --eam-radius-sm:  8px;
    --eam-radius-lg:  20px;
    --eam-font:       'Plus Jakarta Sans', 'Sora', sans-serif;
    --eam-font-head:  'Sora', 'Plus Jakarta Sans', sans-serif;
    --eam-font-num:   'Plus Jakarta Sans', sans-serif;
    --eam-shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --eam-shadow:     0 4px 16px rgba(0,0,0,.08);
    --eam-shadow-lg:  0 8px 32px rgba(0,0,0,.12);
    --eam-border:     #e2e8f0;
    --eam-text:       #1e293b;
    --eam-text-muted: #64748b;
    --eam-primary:    #4f46e5;
    --eam-primary-light: #ede9fe;
}

/* ── Base Typography ── */
.eam-emp-wrap, .eam-emp-wrap * {
    font-family: var(--eam-font);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

.eam-emp-wrap h1, .eam-emp-wrap h2, .eam-emp-wrap h3,
.eam-emp-wrap h4, .eam-emp-wrap h5 {
    font-family: var(--eam-font-head);
    letter-spacing: -0.3px;
    color: var(--eam-text);
}

.eam-dashboard, .eam-leaves {
    max-width: 960px;
    margin: 0 auto;
    font-family: var(--eam-font);
}
.eam-team, #eam-team-wrap .eam-dashboard {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
    font-family: var(--eam-font);
}

/* ── Team Header ── */
.eam-team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid #e5e7eb;
}
.eam-team-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}
.eam-date-label {
    font-size: 13px;
    color: var(--eam-gray);
    margin: 0;
    font-weight: 400;
}

/* ── Summary Stat Cards ── */
.eam-cards-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
.eam-card-stat {
    background: var(--eam-white);
    border-radius: var(--eam-radius);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 1.5px solid #e5e7eb;
    transition: transform 0.15s;
}
.eam-card-stat:hover { transform: translateY(-2px); }
.eam-card-num {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}
.eam-card-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.eam-card-stat.green .eam-card-num  { color: #059669; }
.eam-card-stat.green .eam-card-label{ color: #059669; }
.eam-card-stat.green { border-color: #d1fae5; background: #f0fdf4; }
.eam-card-stat.red .eam-card-num    { color: #dc2626; }
.eam-card-stat.red .eam-card-label  { color: #dc2626; }
.eam-card-stat.red { border-color: #fee2e2; background: #fff5f5; }
.eam-card-stat.orange .eam-card-num  { color: #ea580c; }
.eam-card-stat.orange .eam-card-label{ color: #ea580c; }
.eam-card-stat.orange { border-color: #ffedd5; background: #fff7ed; }
.eam-card-stat.blue .eam-card-num   { color: #2563eb; }
.eam-card-stat.blue .eam-card-label { color: #2563eb; }
.eam-card-stat.blue { border-color: #dbeafe; background: #eff6ff; }

/* ── Sections ── */
.eam-section {
    background: var(--eam-white);
    border-radius: var(--eam-radius);
    border: 1.5px solid #e5e7eb;
    margin-bottom: 20px;
    overflow: hidden;
}
.eam-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f3f4f6;
    flex-wrap: wrap;
    gap: 12px;
}
.eam-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f3f4f6;
}
.eam-section-header .eam-section-title {
    padding: 0;
    border: none;
}

/* ── Month Filter ── */
.eam-month-filter {
    display: flex;
    gap: 8px;
    align-items: center;
}
.eam-month-filter select {
    padding: 7px 10px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--eam-font);
    color: #374151;
    background: #fff;
    cursor: pointer;
}
.eam-filter-btn {
    padding: 7px 16px;
    background: #111827;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--eam-font);
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}
.eam-filter-btn:hover { opacity: 0.85; }

/* ── Team Table ── */
.eam-team-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    font-family: var(--eam-font);
}
.eam-team-table thead th {
    background: #f9fafb;
    padding: 11px 18px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
    border-bottom: 1px solid #f3f4f6;
}
.eam-team-table tbody td {
    padding: 13px 18px;
    border-bottom: 1px solid #f9fafb;
    color: #374151;
    vertical-align: middle;
}
.eam-team-table tbody tr:last-child td { border-bottom: none; }
.eam-team-table tbody tr:hover td { background: #fafafa; }
.eam-time { font-variant-numeric: tabular-nums; color: #6b7280; }

/* ── Employee Cell ── */
.eam-employee-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.eam-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.eam-avatar.blue { background: #dbeafe; color: #1d4ed8; }
.eam-avatar.sm { width: 28px; height: 28px; font-size: 10px; }

/* ── Status Pills ── */
.eam-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--eam-font);
}
.eam-pill.present     { background: #d1fae5; color: #065f46; }
.eam-pill.short_hours { background: #fff7ed; color: #9a3412; }
.eam-pill.absent      { background: #fee2e2; color: #991b1b; }
.eam-pill.working     { background: #fef9c3; color: #854d0e; }
.eam-pill.approved    { background: #dbeafe; color: #1e40af; }
.eam-pill.pending     { background: #fef3c7; color: #92400e; }
.eam-pill.rejected    { background: #fee2e2; color: #991b1b; }

/* ── Empty State ── */
.eam-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
}
.eam-empty-icon { font-size: 36px; margin-bottom: 10px; }
.eam-empty-state p { margin: 0; font-size: 14px; }

/* ── Welcome (Employee Dashboard) ── */
.eam-welcome {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    color: white;
    padding: 28px 32px;
    border-radius: 18px;
    margin-bottom: 24px;
    box-shadow: 0 4px 24px rgba(15,23,42,.2);
    position: relative;
    overflow: hidden;
}
.eam-welcome::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(99,102,241,.12);
}
.eam-welcome h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.4px; font-family: var(--eam-font-head); }
.eam-welcome p  { margin: 0; opacity: 0.55; font-size: 13.5px; font-weight: 400; letter-spacing: 0.1px; }

/* ── Check-in Card ── */
.eam-checkin-card {
    background: var(--eam-white);
    border-radius: var(--eam-radius);
    padding: 30px;
    text-align: center;
    border: 1.5px solid #e5e7eb;
    margin-bottom: 20px;
}
/* Clock inside employee header - dark text on flat white card */
.eam-emp-header #eam-clock {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    text-shadow: none;
    margin-bottom: 0;
}
/* Standalone clock (outside header) */
#eam-clock:not(.eam-emp-header #eam-clock) {
    font-size: 44px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px;
    letter-spacing: 3px;
    font-variant-numeric: tabular-nums;
}
.eam-checked-in p, .eam-done p { margin: 6px 0; font-size: 15px; }

/* ── Buttons ── */
.eam-btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 10px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--eam-font);
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    margin: 4px;
}
.eam-btn:hover { transform: translateY(-1px); opacity: 0.9; }
.eam-btn-green { background: #059669; color: white; }
.eam-btn-red   { background: #dc2626; color: white; }
.eam-btn-blue  { background: #2563eb; color: white; }

/* ── Summary Stats (Employee) ── */
.eam-summary-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.eam-stat {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    background: var(--eam-bg);
    font-family: var(--eam-font);
}
.eam-stat.present { border-left: 4px solid #10b981; }
.eam-stat.absent  { border-left: 4px solid #ef4444; }
.eam-stat.late    { border-left: 4px solid #f97316; }
.eam-stat.hours   { border-left: 4px solid #3b82f6; }

/* ── Generic Table ── */
.eam-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    font-family: var(--eam-font);
    letter-spacing: -0.1px;
}
.eam-table th {
    background: #f8fafc;
    padding: 11px 16px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.eam-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
    font-weight: 400;
}
.eam-table tr:last-child td { border-bottom: none; }
.eam-table tr:hover td { background: #f8fafc; }

/* ── My Leave History — redesigned row-card list ── */
.eam-lh-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.eam-lh-head h3 { margin: 0; }
.eam-lh-count { font-size: 13px; color: #64748b; font-weight: 500; }
.eam-lh-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.eam-lh-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    transition: box-shadow .15s, border-color .15s;
}
.eam-lh-row:hover { border-color: #d1d5db; box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.eam-lh-row--rejected { opacity: .82; }
.eam-lh-date-badge {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.eam-lh-date-mon { font-size: 10px; font-weight: 700; letter-spacing: .3px; margin-bottom: 2px; }
.eam-lh-date-day { font-size: 14px; font-weight: 700; }
.eam-lh-row--approved .eam-lh-date-badge { background: #e9faf2; }
.eam-lh-row--approved .eam-lh-date-mon,
.eam-lh-row--approved .eam-lh-date-day { color: #085041; }
.eam-lh-row--pending .eam-lh-date-badge { background: #fff3e8; }
.eam-lh-row--pending .eam-lh-date-mon,
.eam-lh-row--pending .eam-lh-date-day { color: #7c3f06; }
.eam-lh-row--rejected .eam-lh-date-badge { background: #fdecee; }
.eam-lh-row--rejected .eam-lh-date-mon,
.eam-lh-row--rejected .eam-lh-date-day { color: #7f1d1d; }
.eam-lh-main { flex: 1; min-width: 0; }
.eam-lh-range { margin: 0; font-size: 14px; font-weight: 600; color: #14141c; }
.eam-lh-sub { margin: 2px 0 0; font-size: 12.5px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eam-lh-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 99px;
    flex-shrink: 0;
    white-space: nowrap;
}
.eam-lh-badge i { font-size: 13px; }
.eam-lh-badge--approved { background: #e9faf2; color: #085041; }
.eam-lh-badge--pending  { background: #fff3e8; color: #7c3f06; }
.eam-lh-badge--rejected { background: #fdecee; color: #7f1d1d; }
@media (max-width: 480px) {
    .eam-lh-row { flex-wrap: wrap; }
    .eam-lh-badge { margin-left: 56px; }
}

/* ── Badges (old style — used in employee dashboard) ── */
.eam-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
}
.eam-badge.present     { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.eam-badge.absent      { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.eam-badge.short_hours { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; }
.eam-badge.pending     { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.eam-badge.approved    { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.eam-badge.rejected    { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.eam-badge.working     { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }

/* ── Absent / on-leave row-card list (Week, Month, Annual panels) ── */
@keyframes eamAbsRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes eamAbsPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.eam-abs-list { display: flex; flex-direction: column; gap: 8px; }
.eam-abs-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    animation: eamAbsRowIn .35s ease both;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.eam-abs-row:hover { border-color: #d1d5db; background: #fafafa; box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.eam-abs-row:hover .eam-abs-avatar { animation: eamAbsPulse .4s ease; }
.eam-abs-row:nth-of-type(1)  { animation-delay: .02s; }
.eam-abs-row:nth-of-type(2)  { animation-delay: .06s; }
.eam-abs-row:nth-of-type(3)  { animation-delay: .10s; }
.eam-abs-row:nth-of-type(4)  { animation-delay: .14s; }
.eam-abs-row:nth-of-type(5)  { animation-delay: .18s; }
.eam-abs-row:nth-of-type(6)  { animation-delay: .22s; }
.eam-abs-row:nth-of-type(7)  { animation-delay: .26s; }
.eam-abs-row:nth-of-type(8)  { animation-delay: .30s; }
.eam-abs-avatar { display: inline-flex; flex-shrink: 0; }
.eam-abs-name { margin: 0; font-size: 14px; font-weight: 600; color: #14141c; flex: 1; }
.eam-abs-main { flex: 1; min-width: 0; }
.eam-abs-main .eam-abs-name { margin: 0; }
.eam-abs-date { margin: 2px 0 0; font-size: 12.5px; color: #6b7280; }
.eam-abs-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 99px;
    flex-shrink: 0;
    white-space: nowrap;
    background: #fdecee;
    color: #7f1d1d;
    transition: transform .15s;
}
.eam-abs-badge i { font-size: 12px; }
.eam-abs-row:hover .eam-abs-badge { transform: scale(1.05); }
.eam-abs-badge--leave { background: #fff3e8; color: #7c3f06; }
@media (prefers-reduced-motion: reduce) {
    .eam-abs-row, .eam-abs-row:hover .eam-abs-avatar, .eam-abs-row:hover .eam-abs-badge { animation: none; transition: none; transform: none; }
}

/* ── Filter form (employee) ── */
.eam-filter-form { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.eam-filter-form select {
    padding: 8px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--eam-font);
}

/* ── Leave card ── */
.eam-card {
    background: var(--eam-white);
    border-radius: var(--eam-radius);
    border: 1.5px solid #e5e7eb;
    padding: 24px;
    margin-bottom: 20px;
}
.eam-card h3 { margin: 0 0 18px; font-size: 16px; font-weight: 600; }

/* ── Leave page — two-column layout: Apply left, History right ── */
.eam-leave-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.eam-leave-grid .eam-leave-apply-card { margin-bottom: 0; }
.eam-leave-grid .eam-section { margin-bottom: 0; }
.eam-leave-grid .eam-section {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(20,20,28,.04);
}
.eam-leave-grid .eam-lh-head {
    margin-bottom: 0;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #f1f5f9;
}
.eam-leave-grid .eam-lh-head h3 { font-size: 15px; font-weight: 700; color: #14141c; }
.eam-leave-grid .eam-lh-list { padding: 14px 22px 18px; margin-top: 0; }
.eam-leave-grid .eam-section > p.eam-notice { padding: 24px; margin: 0; }
@media (max-width: 900px) {
    .eam-leave-grid { grid-template-columns: 1fr; }
}

/* ── New Leave Apply Card ── */
.eam-leave-apply-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    margin-bottom: 22px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20,20,28,.04);
}
.eam-leave-apply-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px 16px;
    background: #faf9ff;
    border-bottom: 1px solid #f1eefe;
}
.eam-leave-apply-icon {
    font-size: 18px; line-height: 1; flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 50%;
    background: #f1eefe; color: #6d5ef0;
    display: flex; align-items: center; justify-content: center;
}
.eam-leave-apply-header h3 { margin: 0 0 3px; font-size: 15px; font-weight: 700; color: #14141c; }
.eam-leave-apply-header p  { margin: 0; font-size: 12px; color: #6b7280; }
.eam-leave-apply-body { padding: 20px 22px; }
.eam-leave-fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.eam-leave-field label {
    display: block; font-size: 13px; font-weight: 600;
    color: #374151; margin-bottom: 6px;
}
.eam-optional { font-size: 11px; font-weight: 400; color: #9ca3af; margin-left: 4px; }
.eam-leave-field input[type="date"],
.eam-leave-field textarea {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px; font-family: var(--eam-font);
    color: #111827; background: #fafafa;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.eam-leave-field input[type="date"]:focus,
.eam-leave-field textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
    background: #fff;
}
.eam-leave-field textarea { resize: vertical; min-height: 88px; }
.eam-leave-multi-toggle {
    margin-bottom: 18px;
}
.eam-toggle-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500; color: #6366f1;
    cursor: pointer; user-select: none;
}
.eam-toggle-label input[type="checkbox"] {
    width: 15px; height: 15px; accent-color: #6366f1; cursor: pointer;
}
.eam-leave-submit-btn {
    width: 100%;
    padding: 11px 20px;
    background: #6d5ef0;
    color: #fff;
    border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    letter-spacing: 0.1px;
}
.eam-leave-submit-btn:hover { background: #5b4be0; }
.eam-leave-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.eam-form-row { margin-bottom: 14px; }
.eam-form-row label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 13px; color: #374151; }
.eam-form-row input,
.eam-form-row select,
.eam-form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--eam-font);
    box-sizing: border-box;
    color: #111827;
}
.eam-form-row textarea { resize: vertical; }
.eam-form-row-inline { display: flex; gap: 14px; }
.eam-form-row-inline .eam-form-group { flex: 1; }
.eam-form-row-inline .eam-form-group label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 13px; color: #374151; }
.eam-form-row-inline .eam-form-group input { width: 100%; padding: 9px 12px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 14px; color: #1f2937; background: #f9fafb; box-sizing: border-box; }

/* ── Messages ── */
.eam-toast-stack {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 92vw;
    max-width: 480px;
    pointer-events: none;
}
.eam-toast-stack > * { pointer-events: auto; }
.eam-message {
    margin-top: 0;
    padding: 14px 42px 14px 18px;
    border-radius: 12px;
    display: none;
    font-weight: 500;
    font-size: 14.5px;
    font-family: var(--eam-font);
    line-height: 1.45;
    box-shadow: 0 10px 32px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.08);
    border: 1px solid transparent;
    animation: eam-toast-in .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes eam-toast-in {
    from { opacity: 0; transform: translateY(-14px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.eam-message.success { background: #d1fae5; color: #065f46; border-color: #a7f3d0; display: block; }
.eam-message.error   { background: #fee2e2; color: #991b1b; border-color: #fecaca; display: block; }
.eam-message.info    { background: #eff6ff; color: #1e3a8a; border-color: #bfdbfe; display: block; }

/* ── Dismiss ("✕") button on toast messages & override box ──
   Sits as a sibling (not a child) so it survives the JS calls that
   rebuild the message's inner content via .text()/.html()/.empty().

   FIX: this used to be shown purely via a CSS sibling selector keyed
   off the message's success/error/info class (see git history). That
   silently desyncs from the message's REAL on-screen visibility any
   time something changes the message's inline "display" (via jQuery
   .show()/.hide()/.fadeOut()) without also touching its class, or any
   time a stale/cached copy of this file is served without this rule —
   in both cases the button was left visibly floating at the top of
   the page with no message next to it (an empty red-bordered "✕" box
   in the header area), which is the exact bug reported.

   Now visibility is driven entirely from JS (face-recognition.js
   → bindMsgCloseSync) via the .eam-visible class below, which is kept
   in sync with the message's *actual* computed visibility through a
   MutationObserver — so it can never disagree with what's on screen,
   regardless of which code path hid/showed the message. !important is
   used defensively so a stale cached stylesheet elsewhere can't leave
   this button stuck visible. */
.eam-msg-close {
    display: none !important;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.08);
    color: #374151;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s ease, transform .15s ease;
}
.eam-msg-close:hover  { background: rgba(0,0,0,.16); transform: scale(1.08); }
.eam-msg-close:active { transform: scale(.94); }
.eam-msg-close.eam-visible {
    display: flex !important;
}
.eam-message-wrap-inline { position: relative; margin-top: 4px; }

.eam-override-box {
    position: relative;
    padding: 14px 42px 14px 16px;
    border-radius: 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    font-family: var(--eam-font);
    box-shadow: 0 10px 32px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.08);
    animation: eam-toast-in .28s cubic-bezier(.34,1.56,.64,1);
}
.eam-override-box.eam-override-pending {
    background: #fef3c7; border-color: #fde68a; color: #92400e; font-size: 13.5px; font-weight: 500;
}
.eam-override-box .eam-msg-close { display: flex !important; color: #7c2d12; }
.eam-override-prompt { font-size: 13.5px; color: #7c2d12; margin-bottom: 10px; font-weight: 500; padding-right: 4px; }
.eam-override-reason {
    width: 100%; box-sizing: border-box; border: 1px solid #fdba74; border-radius: 8px;
    padding: 8px 10px; font-size: 13.5px; font-family: var(--eam-font); margin-bottom: 10px; resize: vertical;
}
.eam-override-request-btn {
    background: #ea580c; color: #fff; border: none; border-radius: 8px;
    padding: 9px 16px; font-size: 13.5px; font-weight: 600; font-family: var(--eam-font);
    cursor: pointer; transition: background .15s;
}
.eam-override-request-btn:hover { background: #c2410c; }
.eam-notice { color: var(--eam-gray); font-style: italic; font-size: 14px; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .eam-cards-row { grid-template-columns: 1fr 1fr; }
    .eam-card-num  { font-size: 28px; }
    #eam-clock     { font-size: 32px; }
    .eam-team-table { font-size: 12px; }
    .eam-team-table th, .eam-team-table td { padding: 10px 10px; }
    .eam-section-header { flex-direction: column; align-items: flex-start; }
    .eam-month-filter { flex-wrap: wrap; }
}

/* ── Period Tab Buttons ── */
.eam-period-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    position: relative;
    z-index: 10;
}
.eam-period-btn {
    padding: 10px 22px;
    position: relative;
    z-index: 10;
    border: 2px solid #e2e8f0;
    background: #fff;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    color: #475569;
    transition: all 0.18s;
    font-family: var(--eam-font);
    letter-spacing: -0.1px;
    box-shadow: var(--eam-shadow-sm);
}
.eam-period-btn:hover {
    border-color: #818cf8;
    color: #4f46e5;
    background: #f5f3ff;
    transform: translateY(-1px);
}
.eam-period-btn.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border-color: #4f46e5;
    color: #fff;
    box-shadow: 0 4px 12px rgba(79,70,229,.25);
}

/* ── Stat Buttons (clickable present/absent/late/leave tiles) ── */
.eam-summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
    position: relative;
    z-index: 10;
}
.eam-stat-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    border: 2px solid transparent;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1 1 140px;
    justify-content: center;
    font-family: var(--eam-font);
    letter-spacing: -0.1px;
    position: relative;
    z-index: 10;
}
.eam-stat-btn strong {
    font-size: 24px;
    font-family: var(--eam-font-num);
    font-weight: 800;
}
.eam-stat-btn.present  { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.eam-stat-btn.absent   { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.eam-stat-btn.late     { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.eam-stat-btn.hours    { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }
.eam-stat-btn:hover, .eam-stat-btn.active-stat {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    border-color: #6366f1 !important;
}

/* ── Detail Panel (slide-down) ── */
.eam-detail-panel {
    display: none;
    margin-top: 18px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
    animation: fadeIn 0.2s ease;
}
.eam-detail-panel h3 {
    margin-top: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.3px;
    font-family: var(--eam-font-head);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Admin Report Page ── */
.eam-admin-report .eam-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    flex: 1 1 140px;
    line-height: 1.6;
}
.eam-admin-report .eam-stat strong {
    font-size: 26px;
    display: block;
}
.eam-admin-table th {
    font-size: 12px;
    text-align: center;
}
.eam-admin-table td {
    text-align: center;
    vertical-align: middle;
}
.eam-admin-table td:first-child {
    text-align: left;
}
.eam-emp-detail-inner {
    background: #f8faff;
    border-top: 2px solid #e0e7ff;
    padding: 18px 20px;
}
.eam-emp-detail-inner h4 {
    font-size: 14px;
    margin-bottom: 10px;
}

/* ════════════════════════════════════════════
   EMPLOYEE DASHBOARD — Modern Redesign
   ════════════════════════════════════════════ */

.eam-emp-wrap {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 24px;
    font-family: var(--eam-font);
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    width: 100%;
}

/* Detail page — no padding/gap, det-wrap handles it */
.eam-emp-wrap.eam-det-page {
    padding: 0 !important;
    gap: 0 !important;
}

/* ── Header ── */
.eam-emp-header {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 18px;
    padding: 18px 22px;
    color: #1f2937;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    position: relative;
}
.eam-emp-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #eff6ff;
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: #2563eb;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.eam-emp-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
}
.eam-emp-header-info { flex: 1; min-width: 0; }
.eam-emp-header-info h2 { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: #111827; line-height: 1.2; }
.eam-emp-header-info p  { margin: 0 0 6px; font-size: 12px; color: #9ca3af; font-weight: 400; }

/* ── Check In Card ── */
.eam-emp-checkin-card {
    background: #fff;
    border-radius: 18px;
    border: 1.5px solid #e5e7eb;
    padding: 24px 26px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.eam-emp-leave-notice {
    display: flex; align-items: flex-start; gap: 16px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-radius: 14px; padding: 18px 22px;
    border: 1.5px solid #fde68a;
}
.eam-emp-leave-icon { font-size: 32px; flex-shrink: 0; line-height: 1; }
.eam-emp-leave-notice strong { display: block; font-size: 15px; color: #92400e; margin-bottom: 5px; font-weight: 700; }
.eam-emp-leave-notice p { margin: 0; font-size: 13px; color: #b45309; }

.eam-emp-checkin-idle,
.eam-emp-checkin-active {
    display: flex; align-items: center; gap: 16px;
}
.eam-emp-status-dot {
    width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
}
.eam-dot-idle   { background: #d1d5db; box-shadow: 0 0 0 5px #f3f4f6; }
.eam-dot-active { background: #10b981; box-shadow: 0 0 0 5px #d1fae5; animation: eam-pulse 1.5s infinite; }
@keyframes eam-pulse { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.65; transform:scale(0.92);} }

.eam-emp-checkin-idle span { flex: 1; font-size: 15px; color: #6b7280; font-weight: 500; }
.eam-emp-checkin-active .eam-emp-checkin-info { flex: 1; }
.eam-emp-checkin-info strong { display: block; font-size: 15px; color: #111827; font-weight: 700; }
.eam-emp-checkin-info span   { font-size: 13px; color: #6b7280; }

.eam-emp-action-btn {
    padding: 11px 26px; border-radius: 12px;
    font-size: 14px; font-weight: 700; border: none; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    letter-spacing: 0.2px;
}
.eam-emp-action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.15); }
.eam-emp-action-btn:active { transform: translateY(0); }
.eam-emp-btn-checkin  { background: linear-gradient(135deg,#10b981,#059669); color: #fff; box-shadow: 0 3px 10px rgba(16,185,129,0.3); }
.eam-emp-btn-checkout { background: linear-gradient(135deg,#f43f5e,#ef4444); color: #fff; box-shadow: 0 3px 10px rgba(239,68,68,0.3); }

/* Busy/disabled state while a check-in or check-out is in flight —
   prevents the button looking clickable during a double-click/double-tap. */
.eam-emp-action-btn:disabled,
.eam-emp-action-btn.eam-btn-busy {
    opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}

/* Inline "try again" / "refresh the page" links inside status messages */
#eam-checkin-message .eam-retry-link,
#eam-checkin-message .eam-reload-link {
    color: inherit; text-decoration: underline; font-weight: 700; cursor: pointer;
}

.eam-emp-checkin-done {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.eam-emp-done-row { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.eam-emp-done-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 24px;
    background: #f9fafb; border-radius: 12px;
}
.eam-emp-done-row .eam-emp-done-sep { padding: 0 8px; }
.eam-emp-done-item label { font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600; }
.eam-emp-done-item strong { font-size: 18px; color: #111827; font-weight: 800; }
.eam-done-hrs .eam-emp-done-item { background: #ede9fe; }
.eam-done-hrs strong { color: #6366f1; }
.eam-emp-done-sep { color: #e5e7eb; font-size: 20px; font-weight: 300; }
.eam-emp-done-badge {
    background: linear-gradient(135deg,#d1fae5,#a7f3d0); color: #065f46;
    padding: 8px 18px; border-radius: 24px; font-size: 13px; font-weight: 700;
    border: 1.5px solid #6ee7b7;
    box-shadow: 0 2px 8px rgba(16,185,129,0.12);
}

/* ── Sections ── */
.eam-emp-section {
    background: #fff;
    border-radius: 18px;
    border: 1.5px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.eam-emp-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px 15px;
    border-bottom: 1.5px solid #f0f0f5;
    flex-wrap: wrap; gap: 10px;
    background: #fafafa;
}
.eam-emp-section-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }

/* Filter form inline */
.eam-emp-filter { display: flex; align-items: center; gap: 8px; }
.eam-emp-filter select {
    padding: 7px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px;
    font-size: 13px; background: #f8fafc; color: #374151; cursor: pointer;
}
.eam-emp-filter-btn {
    padding: 7px 16px; background: #6366f1; color: #fff;
    border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.eam-emp-filter-btn:hover { background: #4f46e5; }

/* Stats row */
.eam-emp-stats-row {
    display: flex; gap: 0; padding: 0;
}
.eam-emp-stat {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 22px 16px; gap: 6px;
    border-right: 1.5px solid #f3f4f6;
}
.eam-emp-stat:last-child { border-right: none; }
.eam-emp-stat-num   { font-size: 32px; font-weight: 800; line-height: 1; }
.eam-emp-stat-label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.eam-emp-stat-green .eam-emp-stat-num   { color: #059669; }
.eam-emp-stat-green .eam-emp-stat-label { color: #059669; }
.eam-emp-stat-green { background: #f0fdf4; }
.eam-emp-stat-orange .eam-emp-stat-num  { color: #ea580c; }
.eam-emp-stat-orange .eam-emp-stat-label{ color: #ea580c; }
.eam-emp-stat-orange { background: #fff7ed; }
.eam-emp-stat-blue .eam-emp-stat-num   { color: #2563eb; }
.eam-emp-stat-blue .eam-emp-stat-label { color: #2563eb; }
.eam-emp-stat-blue { background: #eff6ff; }

/* Table */
.eam-emp-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
}
.eam-emp-table thead th {
    background: #f8fafc; padding: 11px 16px;
    font-size: 12px; font-weight: 600; color: #6b7280;
    text-align: left; text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 1.5px solid #e5e7eb;
}
.eam-emp-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    vertical-align: middle;
}
.eam-emp-table tbody tr:last-child td { border-bottom: none; }
.eam-emp-table tbody tr:hover { background: #fafafa; }
.eam-row-warn td { background: #fffbeb !important; }
.eam-row-warn:hover td { background: #fef3c7 !important; }

.eam-emp-empty { padding: 20px 22px; color: #9ca3af; font-size: 14px; margin: 0; }
.eam-emp-empty-state {
    text-align: center; padding: 40px 20px;
}
.eam-emp-empty-state span { font-size: 40px; display: block; margin-bottom: 10px; }
.eam-emp-empty-state p { margin: 0; color: #9ca3af; font-size: 15px; }

@media (max-width: 640px) {
    .eam-emp-header { flex-wrap: wrap; }
    .eam-emp-clock  { display: none; }
    .eam-emp-stats-row { flex-direction: column; }
    .eam-emp-stat   { border-right: none; border-bottom: 1.5px solid #f3f4f6; }
    .eam-emp-done-row { flex-direction: column; gap: 10px; }
}

/* ── Week Day Group (Point 3) ── */
.eam-week-day-group {
    margin-bottom: 20px;
}
.eam-week-day-label {
    font-size: 13px;
    font-weight: 700;
    color: #4f46e5;
    background: #eef2ff;
    padding: 7px 14px;
    border-radius: 8px;
    margin-bottom: 8px;
    display: inline-block;
}

/* ── Team Month Pills (Point 4) ── */
.eam-month-nav-bar {
    margin-bottom: 16px;
}
.eam-month-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 0 4px;
}
.eam-mpill-team {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid #e5e7eb;
    background: #f9fafb;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--eam-font);
    transition: all 0.15s;
}
.eam-mpill-team:hover { background: #e0e7ff; border-color: #6366f1; color: #4338ca; }
.eam-mpill-team.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }

/* ── Short Time badge (ensure it shows) ── */
.eam-badge.short_hours { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; }

/* ── Absent stat button ── */
.eam-stat-btn.absent { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* ══════════════════════════════════════════
   FONT UPGRADE — Sora + Plus Jakarta Sans Typography
   ══════════════════════════════════════════ */

/* Plus Jakarta Sans for all numeric/time displays — crisper tabular rendering */
#eam-clock,
.eam-card-num,
.eam-emp-stat-num,
.eam-emp-done-item strong,
.eam-time,
.eam-emp-table td:nth-child(3),
.eam-emp-table td:nth-child(4),
.eam-team-table .eam-time {
    font-family: var(--eam-font-num);
    font-feature-settings: "tnum" 1, "cv01" 1;
}

/* Sora 800 for big headings — bolder than 700 */
.eam-emp-header-info h2,
.eam-team-header h2,
.eam-welcome h2 {
    font-weight: 800;
    letter-spacing: -0.3px;
}

/* Sora 300 for subtitles/muted text */
.eam-emp-header-info p,
.eam-welcome p,
.eam-date-label,
.eam-empty-state p,
.eam-emp-empty-state p {
    font-weight: 300;
    letter-spacing: 0.1px;
}

/* Section titles — Sora 600 with tighter tracking */
.eam-section-title,
.eam-emp-section-head h3,
.eam-card h3 {
    font-weight: 600;
    letter-spacing: -0.2px;
}

/* Table headers — Plus Jakarta Sans for clean uppercase labels */
.eam-team-table thead th,
.eam-emp-table thead th,
.eam-table th {
    font-family: var(--eam-font-num);
    font-weight: 600;
    letter-spacing: 0.6px;
}

/* Status pills — Sora 600 with slight tracking */
.eam-pill,
.eam-badge {
    font-family: var(--eam-font);
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Stat card labels — Plus Jakarta Sans uppercase micro text */
.eam-card-label,
.eam-emp-stat-label,
.eam-emp-done-item label {
    font-family: var(--eam-font-num);
    font-weight: 600;
    letter-spacing: 0.8px;
}

/* Buttons — Sora 600 */
.eam-btn,
.eam-filter-btn,
.eam-emp-action-btn,
.eam-emp-filter-btn,
.eam-leave-submit-btn,
.eam-period-btn {
    font-family: var(--eam-font);
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Form inputs — Plus Jakarta Sans for cleaner data entry */
.eam-leave-field input,
.eam-leave-field textarea,
.eam-form-row input,
.eam-form-row select,
.eam-form-row textarea,
.eam-emp-filter select,
.eam-month-filter select {
    font-family: var(--eam-font-num);
}

/* Italic helper — Sora italic for notices */
.eam-notice {
    font-family: var(--eam-font);
    font-style: italic;
    font-weight: 400;
}


/* ── Site Header ───────────────────────── */
.eam-site-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1px solid var(--eam-border) !important;
    border-radius: 16px !important;
    padding: 0 24px !important;
    height: 68px !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    gap: 0 !important;
    overflow: hidden !important;
    box-shadow: var(--eam-shadow-sm) !important;
}

/* Left */
.eam-site-header-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 11px !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.eam-site-logo {
    height: 42px !important;
    max-height: 42px !important;
    width: auto !important;
    max-width: 160px !important;
    min-width: unset !important;
    border-radius: 6px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
    flex-shrink: 0 !important;
}
.eam-site-logo-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(79,70,229,.25) !important;
}
.eam-site-name {
    font-family: var(--eam-font-head) !important;
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
}

/* Center nav */
.eam-site-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 3px !important;
}
.eam-site-nav a {
    font-family: var(--eam-font) !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    padding: 8px 16px !important;
    border-radius: 9px !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s !important;
    white-space: nowrap !important;
    display: inline-block !important;
    letter-spacing: -0.1px !important;
}
.eam-site-nav a:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
}
.eam-site-nav a.active {
    background: #ede9fe !important;
    color: #4338ca !important;
    font-weight: 700 !important;
}

/* Right */
.eam-site-header-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}
.eam-header-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: #fff !important;
    font-family: var(--eam-font-head) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 8px rgba(79,70,229,.2) !important;
    overflow: hidden !important;
}
.eam-header-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}
.eam-header-avatar-link {
    display: inline-flex !important;
    text-decoration: none !important;
    border-radius: 50% !important;
    transition: box-shadow .15s ease, transform .15s ease !important;
}
.eam-header-avatar-link:hover {
    box-shadow: 0 0 0 2px #c7d2fe !important;
    transform: translateY(-1px) !important;
}
.eam-header-avatar-link:focus-visible {
    outline: 2px solid #4f46e5 !important;
    outline-offset: 2px !important;
}
.eam-header-name {
    font-family: var(--eam-font) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    letter-spacing: -0.1px !important;
}
.eam-header-logout {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: var(--eam-font) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    padding: 8px 14px !important;
    border-radius: 9px !important;
    border: 1.5px solid #e2e8f0 !important;
    text-decoration: none !important;
    background: #fff !important;
    white-space: nowrap !important;
    transition: all 0.15s !important;
    letter-spacing: -0.1px !important;
}
.eam-header-logout:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}
.eam-header-logout i {
    font-size: 14px !important;
    line-height: 1 !important;
}

/* ── Notification Bell ───────────────────── */
.eam-bell-btn {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #fff !important;
    color: #64748b !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.15s !important;
}
.eam-bell-btn:hover {
    background: #f8fafc !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}
.eam-bell-btn i { font-size: 18px !important; line-height: 1 !important; }
.eam-bell-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 20px !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-align: center !important;
    box-shadow: 0 0 0 2px #fff !important;
}

/* ── "New" pulse: added via JS when a fresh notification arrives while
   the page is open (see eam-notif-poll in frontend.js). Ring pulses
   outward from the bell so a new announcement is hard to miss even
   without opening the panel. Stops automatically once the bell is
   clicked / panel is opened. ── */
.eam-bell-btn.eam-bell-pulse {
    animation: eam-bell-shake 0.6s ease-in-out 0s 2 !important;
}
.eam-bell-btn.eam-bell-pulse::after {
    content: "" !important;
    position: absolute !important;
    inset: -3px !important;
    border-radius: 11px !important;
    border: 2px solid #ef4444 !important;
    animation: eam-bell-ring 1.4s ease-out infinite !important;
    pointer-events: none !important;
}
.eam-bell-badge.eam-bell-badge--new {
    animation: eam-bell-pop 0.4s ease !important;
}
@keyframes eam-bell-shake {
    0%, 100% { transform: rotate(0deg) !important; }
    20%      { transform: rotate(-14deg) !important; }
    40%      { transform: rotate(11deg) !important; }
    60%      { transform: rotate(-7deg) !important; }
    80%      { transform: rotate(4deg) !important; }
}
@keyframes eam-bell-ring {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.45) !important; opacity: 1 !important; }
    100% { box-shadow: 0 0 0 10px rgba(239,68,68,0) !important; opacity: 0 !important; }
}
@keyframes eam-bell-pop {
    0%   { transform: scale(0.4) !important; }
    60%  { transform: scale(1.25) !important; }
    100% { transform: scale(1) !important; }
}
.eam-site-header--admin .eam-bell-btn { background: rgba(255,255,255,.06) !important; border-color: #312e81 !important; color: #a5b4fc !important; }
.eam-site-header--admin .eam-bell-btn:hover { background: rgba(255,255,255,.12) !important; color: #e0e7ff !important; }

/* ── Notification Panel (replaces old always-visible top banner) ───────── */
/* Same reliable pattern as .eam-mobile-nav above: element is ALWAYS
   position:fixed (never toggled), just shifted off-screen / hidden by
   default and !important on every layout property so theme/page-builder
   CSS can't silently win the specificity fight. z-index is pushed above
   the WP admin toolbar (99999) since these are logged-in-only pages. */
.eam-notif-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15,23,42,.45) !important;
    z-index: 999990 !important;
}
.eam-notif-overlay.open { display: block !important; }
.eam-notif-panel {
    position: fixed !important;
    top: 0 !important;
    right: -400px !important;
    bottom: 0 !important;
    width: 380px !important;
    max-width: 92vw !important;
    background: #f4f5fb !important;
    z-index: 999991 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: -8px 0 30px rgba(0,0,0,.15) !important;
    transition: right 0.22s cubic-bezier(0.4,0,0.2,1) !important;
    visibility: hidden !important;
}
.eam-notif-panel.open {
    right: 0 !important;
    visibility: visible !important;
}
.eam-notif-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 20px !important;
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 10px rgba(79,70,229,.25) !important;
    position: relative !important;
    z-index: 1 !important;
}
.eam-notif-panel-header h3 {
    margin: 0 !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    letter-spacing: -.1px !important;
}
.eam-notif-panel-header h3 i {
    font-size: 15px !important;
    color: #4f46e5 !important;
    background: #ffffff !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.eam-notif-close {
    background: rgba(255,255,255,.15) !important;
    border: none !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: background .15s !important;
}
.eam-notif-close:hover { background: rgba(255,255,255,.28) !important; color: #ffffff !important; }
.eam-notif-panel-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px 14px 24px !important;
}
.eam-notif-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 70px 20px !important;
    color: #94a3b8 !important;
}
.eam-notif-empty i {
    font-size: 26px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #c7d2fe !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(79,70,229,.08) !important;
}
.eam-notif-empty p { margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; }

@media (max-width: 640px) {
    .eam-bell-btn { width: 34px !important; height: 34px !important; }
    .eam-notif-panel { width: 100% !important; max-width: 100vw !important; }
}

/* ── Site Footer ───────────────────────── */
.eam-footer {
    margin-top: 36px !important;
    padding: 20px 0 12px !important;
    border-top: 1px solid #e2e8f0 !important;
    text-align: center !important;
    display: block !important;
}
.eam-footer span {
    font-family: var(--eam-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.2px !important;
}

@media (max-width: 640px) {
    /* Nav now handled by hamburger menu — see MOBILE HEADER section below */
    .eam-site-header { padding: 0 14px !important; height: 58px !important; border-radius: 12px !important; }
}

/* ── Admin/Manager report header extras ── */
.eam-site-header--admin {
    background: #1e1b4b;
    border-bottom-color: #312e81;
}
.eam-site-header--admin .eam-site-name { color: #e0e7ff; }
.eam-site-header--admin .eam-site-nav a { color: #a5b4fc; }
.eam-site-header--admin .eam-site-nav a:hover { color: #e0e7ff; background: rgba(255,255,255,0.08); }
.eam-site-header--admin .eam-header-name { color: #e0e7ff; }
.eam-site-header--admin .eam-header-logout { color: #a5b4fc; }
.eam-site-header--admin .eam-header-logout:hover { color: #e0e7ff; }
.eam-site-header--admin .eam-header-avatar { background: linear-gradient(135deg,#4338ca,#6d28d9); color: #e0e7ff; }
.eam-admin-nav-home { display:flex; align-items:center; gap:5px; }
.eam-header-role-badge {
    font-size: 11.5px; font-weight: 600;
    padding: 4px 12px; border-radius: 20px;
    background: rgba(99,102,241,.25); color: #c7d2fe;
    margin-right: 4px; letter-spacing: 0.2px;
}
.eam-header-role-badge--light {
    background: #eef2ff;
    color: #4338ca;
}
.eam-nav-home-link { display: flex; align-items: center; gap: 5px; }

/* ══════════════════════════════════════════════════════
   EAM v14 — New Feature Styles
══════════════════════════════════════════════════════ */

/* (Team Attendance / Employee Details header links now use the standard
   .eam-site-nav a / .eam-site-nav a.active styles above, so the header looks
   the same no matter which page you're on — no more random button look.) */

/* ── Individual Attendance Page: Role/Designation Badges ── */
.eam-emp-role-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
}
.eam-emp-role-badge,
.eam-emp-desig-badge,
.eam-emp-roleno-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 22px;
    line-height: 1.4;
}
.eam-emp-role-badge.eam-role-employee {
    background: #eff6ff;
    color: #2563eb;
    border: none;
}
.eam-emp-role-badge.eam-role-intern {
    background: #fffbeb;
    color: #b45309;
    border: none;
}
.eam-emp-desig-badge {
    background: #f9fafb;
    color: #6b7280;
    border: none;
}
.eam-emp-roleno-badge {
    background: #f9fafb;
    color: #6b7280;
    border: none;
}

/* ══════════════════════════════════════════
   BUG FIX v14 — Team Attendance Panel Fixes
   Prevents theme CSS from overriding plugin
   ══════════════════════════════════════════ */

/* Force all period panels hidden by default — theme override safe */
#eam-team-wrap .eam-period-panel {
    display: none !important;
}
/* First panel (Today) shown via JS on page load — no static CSS needed */
/* When JS sets display:block inline it overrides !important
   so we use attribute selector for JS-shown panels */
#eam-team-wrap .eam-period-panel[style*="display: block"],
#eam-team-wrap .eam-period-panel[style*="display:block"] {
    display: block !important;
}

/* Force detail panels hidden — strong specificity to beat themes */
#eam-team-wrap .eam-detail-panel {
    display: none !important;
    margin-top: 18px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
}
/* When JS sets display:block */
#eam-team-wrap .eam-detail-panel[style*="display: block"],
#eam-team-wrap .eam-detail-panel[style*="display:block"] {
    display: block !important;
    animation: fadeIn 0.2s ease;
}

/* Period buttons — force correct button appearance vs theme reset */
#eam-team-wrap .eam-period-tabs {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
}
#eam-team-wrap .eam-period-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 22px !important;
    border: 2px solid #e2e8f0 !important;
    background: #fff !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    color: #475569 !important;
    transition: all 0.18s !important;
    font-family: var(--eam-font) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
#eam-team-wrap .eam-period-btn:hover {
    border-color: #818cf8 !important;
    color: #4f46e5 !important;
    background: #f5f3ff !important;
    transform: translateY(-1px) !important;
}
#eam-team-wrap .eam-period-btn.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    border-color: #4f46e5 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(79,70,229,.25) !important;
}

/* Stat buttons — force colors, beat theme */
#eam-team-wrap .eam-stat-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 22px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    flex: 1 1 140px !important;
    justify-content: center !important;
    font-family: var(--eam-font) !important;
    border: 2px solid transparent !important;
    line-height: 1 !important;
}
#eam-team-wrap .eam-stat-btn strong {
    font-size: 24px !important;
    font-weight: 800 !important;
}
#eam-team-wrap .eam-stat-btn.present {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border-color: #6ee7b7 !important;
}
#eam-team-wrap .eam-stat-btn.absent {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
}
#eam-team-wrap .eam-stat-btn.hours {
    background: #e0e7ff !important;
    color: #3730a3 !important;
    border-color: #a5b4fc !important;
}
#eam-team-wrap .eam-stat-btn.leave {
    background: #fef9c3 !important;
    color: #a16207 !important;
    border-color: #fde68a !important;
    cursor: default !important;
}
#eam-team-wrap .eam-stat-btn.total {
    background: #ede9fe !important;
    color: #6d28d9 !important;
    border-color: #ddd6fe !important;
    cursor: default !important;
}
#eam-team-wrap .eam-stat-btn:hover,
#eam-team-wrap .eam-stat-btn.active-stat {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.12) !important;
    border-color: #6366f1 !important;
}

/* Summary stats row */
#eam-team-wrap .eam-summary-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
}

/* Month pills */
#eam-team-wrap .eam-month-pills-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 12px 0 4px !important;
}
#eam-team-wrap .eam-mpill-team {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    border: 1.5px solid #e5e7eb !important;
    background: #f9fafb !important;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    line-height: 1 !important;
}
#eam-team-wrap .eam-mpill-team.active {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #fff !important;
}

/* Table inside detail panel */
#eam-team-wrap .eam-detail-panel .eam-table {
    width: 100% !important;
    border-collapse: collapse !important;
}
#eam-team-wrap .eam-detail-panel .eam-table th,
#eam-team-wrap .eam-detail-panel .eam-table td {
    padding: 11px 16px !important;
    text-align: left !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 13.5px !important;
}
#eam-team-wrap .eam-detail-panel .eam-table th {
    background: #f8fafc !important;
    font-weight: 600 !important;
    color: #475569 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

/* Welcome box inside team wrap */
#eam-team-wrap .eam-welcome {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important;
    color: white !important;
    padding: 28px 32px !important;
    border-radius: 18px !important;
    margin-bottom: 24px !important;
}
#eam-team-wrap .eam-welcome h2 {
    color: #fff !important;
    margin: 0 0 6px !important;
    font-size: 22px !important;
}
#eam-team-wrap .eam-welcome p {
    color: rgba(255,255,255,0.6) !important;
    margin: 0 !important;
}

/* ── GPS Location Status Pill ── */
.eam-gps-location-status {
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: 500;
}
.eam-gps-detecting { color: var(--eam-gray); }
.eam-gps-office    {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dbeafe;
    color: #1e40af;
    padding: 4px 12px;
    border-radius: 99px;
    font-weight: 600;
}
.eam-gps-remote    {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fef3c7;
    color: #92400e;
    padding: 4px 12px;
    border-radius: 99px;
    font-weight: 600;
}
.eam-gps-unknown   { color: var(--eam-gray); font-size: 12px; }
.eam-gps-ok        { color: var(--eam-green); }

/* GPS pill shown during check-in flow */
.eam-gps-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
}
.eam-gps-pill--office  { background: #dbeafe; color: #1e40af; }
.eam-gps-pill--remote  { background: #fef3c7; color: #92400e; }
.eam-gps-pill--unknown { background: #f3f4f6; color: #6b7280; }
.eam-gps-pill--ok      { background: #d1fae5; color: #065f46; }

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES — All Pages
   Fixes: header overflow, tables, checkin card,
   stat buttons, leave form, site-nav, done-row
══════════════════════════════════════════════════════ */

/* ── Global: prevent horizontal scroll on mobile ── */
@media (max-width: 768px) {
    .eam-emp-wrap {
        padding: 12px 14px;
        gap: 14px;
    }

    /* ── Header card ── */
    .eam-emp-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 20px;
        border-radius: 16px;
        gap: 14px;
    }
    .eam-emp-header::before,
    .eam-emp-header::after { display: none; }

    /* Clock in header — show on mobile too */
    .eam-emp-clock { display: block !important; }
    .eam-emp-header #eam-clock {
        font-size: 24px;
        letter-spacing: 1px;
    }

    /* ── Site header ── */
    .eam-site-header {
        padding: 0 14px !important;
        height: 54px !important;
        border-radius: 12px !important;
    }
    .eam-site-name {
        font-size: 13px !important;
    }
    /* logout — now hidden on mobile via hamburger section */ 

    /* ── Check-in card ── */
    .eam-emp-checkin-card {
        padding: 18px 16px;
        border-radius: 14px;
    }
    .eam-emp-checkin-idle,
    .eam-emp-checkin-active {
        flex-wrap: wrap;
        gap: 12px;
    }
    .eam-emp-action-btn {
        width: 100%;
        padding: 13px 20px;
        font-size: 15px;
        border-radius: 12px;
    }

    /* Done state - checkin/checkout times */
    .eam-emp-checkin-done {
        flex-direction: column;
        gap: 14px;
    }
    .eam-emp-done-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }
    .eam-emp-done-item {
        flex: 1 1 calc(50% - 8px);
        padding: 10px 14px;
        text-align: center;
        border-radius: 10px;
    }
    .eam-emp-done-sep { display: none; }
    .eam-emp-done-badge {
        width: 100%;
        text-align: center;
    }
    .eam-emp-action-btn { flex: 1 1 100%; }

    /* ── Stats row — horizontal scroll ── */
    .eam-emp-stats-row {
        flex-direction: row !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 0;
        padding-bottom: 2px;
    }
    .eam-emp-stat {
        min-width: 90px;
        border-right: 1.5px solid #f3f4f6 !important;
        border-bottom: none !important;
        flex-shrink: 0;
        padding: 16px 12px;
    }
    .eam-emp-stat-num { font-size: 24px; }

    /* ── Team cards row ── */
    .eam-cards-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    .eam-card-num { font-size: 26px; }

    /* ── Tables: horizontal scroll wrapper ── */
    .eam-section,
    .eam-emp-section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .eam-emp-table,
    .eam-team-table,
    .eam-table {
        min-width: 500px;
    }

    /* ── Section headers ── */
    .eam-emp-section-head {
        padding: 14px 16px 12px;
        gap: 8px;
    }
    .eam-emp-section-head h3 { font-size: 14px; }

    /* ── Filter row ── */
    .eam-emp-filter {
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }
    .eam-emp-filter select {
        flex: 1;
        min-width: 0;
        font-size: 13px;
    }
    .eam-emp-filter-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* ── Period tab buttons ── */
    .eam-period-tabs {
        gap: 6px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .eam-period-btn {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 9px 16px;
        font-size: 12.5px;
    }

    /* ── Stat buttons (present/absent/late) ── */
    .eam-summary-stats {
        gap: 8px;
    }
    .eam-stat-btn {
        flex: 1 1 calc(50% - 8px);
        padding: 14px 12px;
        font-size: 13px;
        border-radius: 12px;
    }
    .eam-stat-btn strong { font-size: 20px; }

    /* ── Team header ── */
    .eam-team-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .eam-month-filter {
        flex-wrap: wrap;
        width: 100%;
    }
    .eam-month-filter select { flex: 1; }

    /* ── Leave apply card ── */
    .eam-leave-apply-body { padding: 16px; }
    .eam-leave-apply-header { padding: 16px; }
    .eam-form-row-inline {
        flex-direction: column;
        gap: 10px;
    }

    /* ── Leave notice banner ── */
    .eam-emp-leave-notice {
        gap: 12px;
        padding: 14px 16px;
    }
    .eam-emp-leave-icon { font-size: 24px; }

    /* ── Month nav pills ── */
    .eam-month-pills-row {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .eam-mpill-team { flex-shrink: 0; }

    /* ── Detail panel ── */
    .eam-detail-panel {
        padding: 16px;
        border-radius: 12px;
    }

    /* ── Role badges in header ── */
    .eam-emp-role-row {
        gap: 4px;
    }
    .eam-emp-role-badge,
    .eam-emp-desig-badge,
    .eam-emp-roleno-badge {
        font-size: 11px;
        padding: 4px 10px;
    }
}

/* ── Extra small (< 400px) ── */
@media (max-width: 400px) {
    .eam-emp-wrap { padding: 10px 10px; }
    .eam-cards-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .eam-emp-header { padding: 16px 14px; }
    .eam-stat-btn { flex: 1 1 calc(50% - 6px); padding: 12px 8px; font-size: 12px; }
    .eam-stat-btn strong { font-size: 18px; }
    .eam-emp-done-item { flex: 1 1 100%; }
}


/* ══════════════════════════════════════════════════════
   MOBILE HEADER — Hamburger + Drawer Nav
══════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.eam-hamburger {
    display: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 38px !important;
    height: 38px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9px !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    transition: background 0.15s !important;
    margin-left: 6px !important;
}
.eam-hamburger span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: #334155 !important;
    border-radius: 2px !important;
    transition: all 0.22s !important;
}
.eam-hamburger:hover { background: #ede9fe !important; border-color: #c4b5fd !important; }
.eam-hamburger:hover span { background: #4f46e5 !important; }

/* Open state — X icon */
.eam-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
.eam-hamburger.open span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
.eam-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

/* ── Isolation guard ──
   Forces a clean, self-contained render for the hamburger button so no
   theme/page-builder/global CSS (e.g. a generic "button", ":focus" or
   ::before/::after reset elsewhere on the site) can paint an extra
   border, outline, or icon on top of it — this is what was showing as
   a stray red/pink "X" box layered over the 3-line icon on some pages.
   isolation:isolate gives it its own stacking context, and the
   ::before/::after + outline resets kill any injected pseudo-element
   or focus ring that isn't ours. */
.eam-hamburger {
    position: relative !important;
    isolation: isolate !important;
    outline: none !important;
    box-shadow: none !important;
}
.eam-hamburger::before,
.eam-hamburger::after {
    content: none !important;
    display: none !important;
}
.eam-hamburger:focus-visible {
    outline: 2px solid var(--eam-primary, #4f46e5) !important;
    outline-offset: 2px !important;
}

/* Overlay */
.eam-mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 9998;
    backdrop-filter: blur(2px);
}
.eam-mobile-nav-overlay.open { display: block; }

/* Nav drawer — hidden by default, slides in from the RIGHT edge of the
   screen (right: -100% off-screen -> right: 0 open), on every screen size. */
.eam-mobile-nav {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    left: auto !important;
    width: 340px !important;
    max-width: 88vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    box-shadow: -4px 0 32px rgba(0,0,0,0.15) !important;
    transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    visibility: hidden !important;
}
.eam-mobile-nav.open {
    right: 0 !important;
    visibility: visible !important;
}

/* Drawer header */
.eam-mobile-nav::before {
    content: 'Menu';
    display: block;
    font-family: var(--eam-font-head);
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 22px 20px 14px;
    border-bottom: 1px solid #f1f5f9;
}

/* Drawer links */
.eam-mobile-nav a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 20px !important;
    font-family: var(--eam-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f9fafb !important;
    transition: background 0.12s, color 0.12s !important;
}
.eam-mobile-nav a:hover {
    background: #f5f3ff !important;
    color: #4f46e5 !important;
}
.eam-mobile-nav a.active {
    background: #ede9fe !important;
    color: #4338ca !important;
    font-weight: 600 !important;
}

/* User row at bottom of drawer */
.eam-mobile-nav-user {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 18px 20px !important;
    margin-top: auto !important;
    border-top: 1.5px solid #f1f5f9 !important;
    background: #fafafa !important;
}
.eam-mobile-nav-user span {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}
.eam-mobile-logout {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    color: #ef4444 !important;
    font-weight: 600 !important;
    border: 1.5px solid #fca5a5 !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
}
.eam-mobile-logout i { font-size: 13px !important; }
.eam-mobile-logout:hover {
    background: #fee2e2 !important;
}

/* ── Header nav lives in the hamburger drawer on EVERY screen size ──
   Too many links (7+) to fit inline even on desktop, so the inline
   .eam-site-nav is always hidden and the hamburger + right-side drawer
   is the only way to reach them. Role badge, avatar, name, logout and
   the notification bell stay visible in the header at all widths. */
.eam-site-nav { display: none !important; }
.eam-hamburger { display: flex !important; }
@media (max-width: 768px) {
    .eam-site-header {
        padding: 0 14px !important;
        height: 56px !important;
        border-radius: 12px !important;
    }
}

/* ── FIX: right-side header items (role badge, name, logout button)
   were overflowing off-screen on narrow phones and getting clipped by
   .eam-site-header's overflow:hidden — the bell/hamburger looked
   "missing" but were actually just pushed past the visible edge.
   Avatar, name and logout are already duplicated in the hamburger
   drawer (.eam-mobile-nav-user), so it's safe to drop them from the
   top bar on small screens and free up room for bell + hamburger. ── */
@media (max-width: 640px) {
    .eam-site-header-right {
        gap: 8px !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
    .eam-header-role-badge,
    .eam-header-name,
    .eam-header-logout {
        display: none !important;
    }
    .eam-bell-btn,
    .eam-hamburger {
        flex-shrink: 0 !important;
    }
}


/* ══════════════════════════════════════════════════════
   EAM ENHANCED UI — Better Animations & Polish
   Only visual improvements — zero functional changes
══════════════════════════════════════════════════════ */

/* ── Page fade-in on load ── */
.eam-emp-wrap {
    animation: eam-page-in 0.35s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes eam-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Header — subtle hover lift (flat card style) ── */
.eam-emp-header {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.eam-emp-header:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

/* ── Avatar pulse ring on active status ── */
.eam-emp-avatar {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.eam-emp-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}

/* ── Site header — smooth shadow on scroll ── */
.eam-site-header {
    transition: box-shadow 0.2s ease !important;
}
.eam-site-header:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

/* ── Nav links — better hover animation ── */
.eam-site-nav a {
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease !important;
    position: relative;
}
.eam-site-nav a:hover {
    transform: translateY(-1px) !important;
}
.eam-site-nav a.active {
    box-shadow: 0 2px 8px rgba(99,102,241,0.18) !important;
}

/* ── Stat cards — staggered entrance ── */
.eam-emp-section,
.eam-emp-checkin-card {
    animation: eam-card-in 0.4s cubic-bezier(0.4,0,0.2,1) both;
}
.eam-emp-section:nth-child(2) { animation-delay: 0.05s; }
.eam-emp-section:nth-child(3) { animation-delay: 0.10s; }
.eam-emp-section:nth-child(4) { animation-delay: 0.15s; }
.eam-emp-section:nth-child(5) { animation-delay: 0.20s; }
@keyframes eam-card-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Stat boxes — hover lift ── */
.eam-emp-stat {
    transition: background 0.18s ease, transform 0.18s ease;
}
.eam-emp-stat:hover {
    transform: translateY(-2px);
    filter: brightness(0.97);
}

/* ── Stat buttons — smoother hover ── */
.eam-stat-btn {
    transition: all 0.22s cubic-bezier(0.4,0,0.2,1) !important;
}
.eam-stat-btn:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.14) !important;
}

/* ── Check-in button — ripple glow ── */
.eam-emp-btn-checkin {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    position: relative;
    overflow: hidden;
}
.eam-emp-btn-checkin::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background 0.2s ease;
    border-radius: inherit;
}
.eam-emp-btn-checkin:hover::after {
    background: rgba(255,255,255,0.12);
}
.eam-emp-btn-checkin:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(16,185,129,0.42) !important;
}
.eam-emp-btn-checkout {
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.eam-emp-btn-checkout:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(239,68,68,0.42) !important;
}

/* ── Period tab pills — smoother active state ── */
.eam-period-btn {
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}
.eam-period-btn.active {
    box-shadow: 0 4px 14px rgba(79,70,229,0.3) !important;
    transform: translateY(-1px) !important;
}

/* ── Month pills — smooth transition ── */
.eam-mpill-team {
    transition: all 0.18s cubic-bezier(0.4,0,0.2,1) !important;
}
.eam-mpill-team:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(99,102,241,0.18) !important;
}
.eam-mpill-team.active {
    box-shadow: 0 3px 10px rgba(79,70,229,0.3) !important;
    transform: translateY(-1px) !important;
}

/* ── Table rows — smoother hover ── */
.eam-emp-table tbody tr {
    transition: background 0.15s ease;
}
.eam-team-table tbody tr {
    transition: background 0.15s ease;
}

/* ── Employee cards (Employee Details page) — better hover ── */
.eam-emp-card {
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── Detail page — left panel card entrance ── */
.eam-det-profile-card {
    animation: eam-card-in 0.38s cubic-bezier(0.4,0,0.2,1) both;
}
.eam-det-right .eam-det-card {
    animation: eam-card-in 0.4s cubic-bezier(0.4,0,0.2,1) both;
}
.eam-det-right .eam-det-card:nth-child(2) { animation-delay: 0.06s; }
.eam-det-right .eam-det-card:nth-child(3) { animation-delay: 0.12s; }

/* ── Ring stat boxes — hover lift ── */
.eam-det-stat-box {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: default;
}
.eam-det-stat-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}

/* ── Heatmap cells — smoother hover ── */
.eam-det-hcell {
    transition: transform 0.12s ease, opacity 0.12s ease !important;
    border-radius: 3px;
}
.eam-det-hcell:not(.future):hover {
    transform: scale(1.3) !important;
    z-index: 2;
    position: relative;
}
.eam-det-hcell.present { opacity: 0.9 !important; }
.eam-det-hcell.absent  { opacity: 0.85 !important; }
.eam-det-hcell.short   { opacity: 0.85 !important; }
.eam-det-hcell.leave   { opacity: 0.9 !important; }

/* ── Month nav buttons — better feel ── */
.eam-det-mnav-btn {
    transition: background 0.15s ease, transform 0.12s ease !important;
}
.eam-det-mnav-btn:not(:disabled):hover {
    background: #ede9fe !important;
    color: #4f46e5 !important;
    transform: scale(1.1) !important;
}
.eam-det-mnav-btn:not(:disabled):active {
    transform: scale(0.95) !important;
}

/* ── Back link — hover animation ── */
.eam-det-back {
    transition: gap 0.15s ease, color 0.15s ease;
}
.eam-det-back:hover {
    gap: 10px !important;
}

/* ── Edit button — shine effect ── */
.eam-det-edit-btn {
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    box-shadow: 0 3px 10px rgba(79,70,229,0.3) !important;
}
.eam-det-edit-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(79,70,229,0.4) !important;
}

/* ── Leave rows — subtle hover ── */
.eam-det-leave-row {
    transition: background 0.15s ease;
    border-radius: 8px;
    padding-left: 6px;
    padding-right: 6px;
}
.eam-det-leave-row:hover {
    background: #fafafa;
}

/* ── Active/green dot — better pulse ── */
.eam-dot-active {
    animation: eam-dot-pulse 1.8s cubic-bezier(0.4,0,0.6,1) infinite !important;
}
@keyframes eam-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); opacity: 1; }
    50%       { box-shadow: 0 0 0 7px rgba(16,185,129,0); opacity: 0.8; }
}

/* ── Leave submit btn — better glow ── */
.eam-leave-submit-btn {
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.eam-leave-submit-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(99,102,241,0.42) !important;
}

/* ── Input focus — smoother ring ── */
.eam-leave-field input:focus,
.eam-leave-field textarea:focus,
.eam-form-row input:focus,
.eam-form-row select:focus {
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* ── Logout btn hover — red slide ── */
.eam-header-logout {
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.15s ease !important;
}
.eam-header-logout:hover {
    transform: translateX(2px) !important;
}

/* ── Hamburger smooth open ── */
.eam-hamburger span {
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── Mobile nav drawer — smoother slide (opens from the right) ── */
.eam-mobile-nav {
    transition: right 0.3s cubic-bezier(0.4,0,0.2,1),
                visibility 0.3s ease !important;
}
.eam-mobile-nav a {
    transition: background 0.15s ease, color 0.15s ease,
                padding-left 0.15s ease !important;
}
.eam-mobile-nav a:hover {
    padding-left: 26px !important;
}

/* ── Status pills — subtle pop ── */
.eam-pill, .eam-badge {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.eam-pill:hover, .eam-badge:hover {
    transform: scale(1.04);
}

/* ── Tenure bar — already animated, boost easing ── */
.eam-det-tenure-fill {
    transition: width 1.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* ── Scroll-based fade for detail cards (IntersectionObserver not needed,
   using animation-fill-mode instead) ── */
.eam-det-card {
    opacity: 0;
    animation: eam-card-in 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* ══════════════════════════════════════════════════════
   EAM — Verification Method Badge
   Shows after check-in: GPS / WiFi IP / Manual
══════════════════════════════════════════════════════ */

.eam-verify-badge {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-family: var(--eam-font);
    animation: eam-vb-in 0.35s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes eam-vb-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* GPS verified — blue */
.eam-verify-badge--gps {
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    color: #1e40af;
}

/* WiFi IP — office matched — green */
.eam-verify-badge--wifi-ok {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    color: #166534;
}

/* WiFi IP — not matched — amber */
.eam-verify-badge--wifi-fail {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    color: #92400e;
}

/* Manual / pending */
.eam-verify-badge--manual {
    background: #f5f3ff;
    border: 1.5px solid #ddd6fe;
    color: #5b21b6;
}

.eam-vb-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.eam-vb-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.4;
}

.eam-vb-body strong {
    font-weight: 700;
    font-size: 13px;
}

/* WiFi IP value pill */
.eam-vb-ip {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 700;
    background: rgba(0,0,0,0.07);
    padding: 1px 7px;
    border-radius: 5px;
    letter-spacing: 0.3px;
}

/* Sub-detail text */
.eam-vb-detail {
    font-size: 11px;
    opacity: 0.72;
    font-weight: 400;
    margin-top: 1px;
}

/* ══════════════════════════════════════════════════════
   EAM UX PASS 2 — Status dots, icon badges, loading dots
   CSS / HTML only — no logic changes
══════════════════════════════════════════════════════ */

/* ── Avatar status dot ── */
.eam-emp-avatar { position: relative; }
.eam-avatar-status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    z-index: 2;
}
.eam-avatar-status-dot--working {
    background: #10b981;
    animation: eam-dot-pulse 1.8s cubic-bezier(0.4,0,0.6,1) infinite;
}
.eam-avatar-status-dot--done {
    background: #9ca3af;
}

/* ── Verify badge: left-accent bar + icon glyphs (no emoji) ── */
.eam-verify-badge {
    border-radius: 0 10px 10px 0 !important;
    border-left-width: 3px !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}
.eam-verify-badge--gps        { border-left-color: #3b82f6 !important; }
.eam-verify-badge--wifi-ok    { border-left-color: #10b981 !important; }
.eam-verify-badge--wifi-fail  { border-left-color: #f59e0b !important; }
.eam-verify-badge--manual     { border-left-color: #8b5cf6 !important; }

.eam-vb-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
}
.eam-vb-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.eam-vb-icon--gps::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231e40af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z'/%3E%3C/svg%3E");
}
.eam-vb-icon--wifi::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18l.01 0'/%3E%3Cpath d='M9.172 15.172a4 4 0 0 1 5.656 0'/%3E%3Cpath d='M6.343 12.343a8 8 0 0 1 11.314 0'/%3E%3Cpath d='M3.515 9.515c4.686 -4.686 12.284 -4.686 16.97 0'/%3E%3C/svg%3E");
}
.eam-vb-icon--warn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2392400e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v2m0 4v.01'/%3E%3Cpath d='M5.07 19h13.86a2 2 0 0 0 1.75 -2.97l-6.93 -12.02a2 2 0 0 0 -3.5 0l-6.92 12.02a2 2 0 0 0 1.74 2.97'/%3E%3C/svg%3E");
}
.eam-vb-icon--pending::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235b21b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v5l3 3'/%3E%3Cpath d='M3.05 11a9 9 0 1 1 .5 4'/%3E%3Cpath d='M3 16v5h5'/%3E%3C/svg%3E");
}

/* ── Loading dots (used for "Getting your location..." etc.) ── */
.eam-message.info {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.eam-message.info::after {
    content: '';
    display: inline-flex;
    width: 28px;
    height: 6px;
    background-image:
        radial-gradient(circle, currentColor 2px, transparent 2.5px),
        radial-gradient(circle, currentColor 2px, transparent 2.5px),
        radial-gradient(circle, currentColor 2px, transparent 2.5px);
    background-repeat: no-repeat;
    background-position: 0 50%, 11px 50%, 22px 50%;
    opacity: 0.55;
    animation: eam-loading-dots 1.2s ease-in-out infinite;
}
@keyframes eam-loading-dots {
    0%, 100% { background-position: 0 50%, 11px 50%, 22px 50%; opacity: 0.4; }
    50%      { opacity: 0.9; }
}

/* ── Heatmap cell: richer tooltip readability via outline on hover ── */
.eam-det-hcell:not(.future):hover {
    outline: 1.5px solid rgba(0,0,0,0.18);
    outline-offset: -1px;
}

/* ── Mini stat row under check-in card (if markup added later) ── */
.eam-checkin-mini-stats {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.eam-checkin-mini-stat {
    flex: 1;
    background: var(--surface-1, #f9fafb);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    transition: transform 0.15s ease;
}
.eam-checkin-mini-stat:hover { transform: translateY(-2px); }
.eam-checkin-mini-stat-value { font-size: 17px; font-weight: 600; line-height: 1.2; }
.eam-checkin-mini-stat-label { font-size: 10px; color: #9ca3af; margin-top: 2px; }

/* ── Skeleton shimmer (smoother, in case skeletons render while loading) ── */
.eam-skeleton {
    background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 37%, #eef0f3 63%);
    background-size: 400% 100%;
    animation: eam-skeleton-shimmer 1.4s ease infinite;
    border-radius: 6px;
}
@keyframes eam-skeleton-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ══════════════════════════════════════════════════════
   EAM Dashboard — Count-up stat cards + row stagger
   CSS / minimal JS only — no logic changes
══════════════════════════════════════════════════════ */

/* Stat cards — entrance + hover */
.eam-emp-stat {
    position: relative;
    overflow: hidden;
    animation: eam-stat-in 0.4s cubic-bezier(0.4,0,0.2,1) both;
    transition: transform 0.18s ease;
}
.eam-emp-stat:hover { transform: translateY(-2px); }
.eam-emp-stat:nth-child(1) { animation-delay: 0s; }
.eam-emp-stat:nth-child(2) { animation-delay: 0.08s; }
.eam-emp-stat:nth-child(3) { animation-delay: 0.16s; }
@keyframes eam-stat-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Count-up number: subtle scale pop while animating */
.eam-emp-stat-num {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* Thin progress strip under each stat (purely decorative, fills via JS-set width if used) */
.eam-emp-stat::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: currentColor;
    opacity: 0.18;
    transform: scaleX(0);
    transform-origin: left;
    animation: eam-stat-bar 0.9s 0.3s cubic-bezier(0.4,0,0.2,1) both;
}
.eam-emp-stat-green::after  { color: #059669; }
.eam-emp-stat-orange::after { color: #ea580c; }
.eam-emp-stat-blue::after   { color: #2563eb; }
@keyframes eam-stat-bar {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Table row stagger entrance */
.eam-row-animate {
    opacity: 0;
    animation: eam-row-in 0.35s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes eam-row-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Badge — gentle pop on row hover */
.eam-emp-table tbody tr:hover .eam-badge {
    transform: scale(1.04);
}
.eam-badge {
    transition: transform 0.15s ease;
    display: inline-block;
}
.eam-badge.working {
    animation: eam-working-pulse 2s ease-in-out infinite;
}
@keyframes eam-working-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

/* Section heads — soft entrance */
.eam-emp-section {
    animation: eam-section-in 0.4s cubic-bezier(0.4,0,0.2,1) both;
}
.eam-emp-section:nth-of-type(2) { animation-delay: 0.05s; }
.eam-emp-section:nth-of-type(3) { animation-delay: 0.10s; }
.eam-emp-section:nth-of-type(4) { animation-delay: 0.15s; }
@keyframes eam-section-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Filter button — nicer feedback */
.eam-emp-filter-btn {
    transition: transform 0.15s ease, background 0.15s ease !important;
}
.eam-emp-filter-btn:active { transform: scale(0.96) !important; }

/* ══════════════════════════════════════════════════════════════════
   Bottom tab bar — mobile app shell
   ──────────────────────────────────────────────────────────────────
   Hidden entirely on desktop/tablet. On phones it replaces the
   hamburger as the primary way to move between sections — the
   hamburger drawer still exists underneath (opened via "More") so
   every link that used to live only in the drawer still works, this
   just surfaces the 3-4 most-used ones where a thumb already is.
   ══════════════════════════════════════════════════════════════════ */
.eam-bottom-nav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9997; /* below the drawer (9999) and its overlay (9998) */
    background: #fff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -2px 16px rgba(15,23,42,.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.eam-bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 8px;
    background: none;
    border: none;
    color: #94a3b8;
    text-decoration: none;
    font-family: var(--eam-font, 'Plus Jakarta Sans', sans-serif);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: -0.1px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.eam-bn-item i { font-size: 21px; line-height: 1; }
.eam-bn-item.active { color: var(--eam-primary, #4f46e5); }
.eam-bn-item:active { transform: scale(0.94); }

/* ── "More" button — explicit reset ──
   Every other .eam-bn-item is an <a> (no native chrome to worry about);
   "More" alone is a real <button>, which without an explicit reset can
   pick up a theme's default button border/outline/focus color instead
   of matching its siblings. Giving it the exact same isolated, borderless
   look as the rest of the bar — instead of relying on inherited/browser
   defaults — is what was showing as a red/pink outline box around it. */
#eam-bn-more {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    position: relative !important;
    isolation: isolate !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
#eam-bn-more::before,
#eam-bn-more::after {
    content: none !important;
    display: none !important;
}
#eam-bn-more:focus-visible {
    outline: 2px solid var(--eam-primary, #4f46e5) !important;
    outline-offset: -2px !important;
}

@media (max-width: 768px) {
    .eam-bottom-nav { display: flex; }
    /* Reserve room so page content (and the FAB/quick-checkin button,
       if a page has one) never sits underneath the fixed bar. */
    body.eam-has-bottomnav {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }
}

/* ══════════════════════════════════════════════════════════════════
   Logout confirm modal
   ══════════════════════════════════════════════════════════════════ */
.eam-logout-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(15,23,42,0);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.2s ease;
    padding: 20px;
}
.eam-logout-confirm-overlay.open {
    background: rgba(15,23,42,0.5);
    pointer-events: all;
}
.eam-logout-confirm-modal {
    background: #fff;
    border-radius: 16px;
    padding: 26px 24px 20px;
    width: 320px;
    max-width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(15,23,42,.25);
    transform: scale(0.9) translateY(10px);
    opacity: 0;
    transition: transform 0.2s cubic-bezier(.16,1,.3,1), opacity 0.2s ease;
}
.eam-logout-confirm-overlay.open .eam-logout-confirm-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.eam-logout-confirm-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #fee2e2;
    color: #dc2626;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px;
    margin: 0 auto 14px;
}
.eam-logout-confirm-modal h3 {
    font-size: 16px; font-weight: 700; color: #0f172a;
    margin: 0 0 6px;
}
.eam-logout-confirm-modal p {
    font-size: 13px; color: #64748b; margin: 0 0 20px; line-height: 1.5;
}
.eam-logout-confirm-actions {
    display: flex; gap: 10px;
}
.eam-logout-confirm-cancel,
.eam-logout-confirm-ok {
    flex: 1;
    padding: 10px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s, transform 0.1s;
}
.eam-logout-confirm-cancel {
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #334155;
}
.eam-logout-confirm-cancel:hover { background: #f8fafc; }
.eam-logout-confirm-ok {
    border: none;
    background: #dc2626;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.eam-logout-confirm-ok:hover { filter: brightness(1.08); }
.eam-logout-confirm-cancel:active,
.eam-logout-confirm-ok:active { transform: scale(0.97); }