/* Employee portal-only styles. Loaded only for /employee pages. Do not put
   HRMIS/Accounting/Billing/global styles here — those belong in app.css.

   The portal is deliberately simpler, calmer and warmer than the HR backoffice:
   a soft neutral canvas, one comfortable content column, generous spacing and a
   friendly nav. Required selectors (body.emp-portal, .emp-nav, .emp-guest-card …)
   are preserved for the view tests. */

:root {
    --emp-accent: #4F46E5;
    --emp-ink: #1f2733;
    --emp-muted: #64748b;
    --emp-line: #e6e9f0;
    --emp-surface: #ffffff;
    --emp-canvas: #eef1f6;
}

/* ===== Shell ===== */
body.emp-portal, body.emp-guest { background:
    radial-gradient(120% 60% at 50% -10%, rgba(79, 70, 229, .06), transparent 60%),
    var(--emp-canvas); }
.emp-container { width: 100%; max-width: 900px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

.emp-topbar { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.1) blur(8px); border-bottom: 1px solid var(--emp-line); padding: 12px 0; }
.emp-user { color: #475569; font-size: .9rem; }

.emp-nav { background: var(--emp-surface); border-bottom: 1px solid #eef0f4; box-shadow: 0 1px 0 rgba(16, 24, 40, .02); }
.emp-nav-link { display: inline-flex; align-items: center; gap: .4rem; padding: .8rem .95rem; color: var(--emp-muted); font-weight: 600; font-size: .92rem; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .12s ease, border-color .12s ease; }
.emp-nav-link:hover { color: #334155; }
.emp-nav-link.active { color: var(--emp-accent); border-bottom-color: var(--emp-accent); }
.emp-nav-link i { font-size: 1.05rem; }

.emp-main { padding-top: 22px; padding-bottom: 44px; min-height: 62vh; }
.emp-footer { padding: 18px 0 30px; }

/* ===== Hero / greeting ===== */
.emp-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.emp-hero-title { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; color: var(--emp-ink); margin: 0; }

/* ===== Cards / tiles — the portal uses generous, single-depth cards ===== */
body.emp-portal .card { border: 1px solid var(--emp-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .03); }
body.emp-portal .card .card-header { border-bottom: 1px solid var(--emp-line); background: transparent; font-weight: 600; }
.emp-page-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; color: var(--emp-ink); }

.emp-tile { transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
a.emp-tile:hover { box-shadow: 0 12px 28px -16px rgba(16, 24, 40, .5); transform: translateY(-1px); border-color: rgba(79, 70, 229, .4); }
.emp-tile-ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(79, 70, 229, .12); color: var(--emp-accent); font-size: 1.35rem; flex: 0 0 auto; }
.emp-tile-muted { opacity: 1; }
.emp-tile-muted .emp-tile-ic { background: var(--lx-surface-2, #f1f3f9); color: #94a3b8; }
.emp-tile-val { font-size: 1.5rem; font-weight: 700; color: var(--emp-ink); line-height: 1.1; }

/* Definition pairs on profile / employment cards */
.emp-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.emp-dl-full { grid-column: 1 / -1; }
.emp-dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--emp-muted); margin-bottom: .1rem; }
.emp-dd { font-weight: 600; color: var(--emp-ink); }
.emp-lock { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--emp-muted); }

/* Document / list rows */
.emp-list-row { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; }
.emp-doc-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--lx-surface-2, #f1f3f9); color: var(--emp-muted); font-size: 1.1rem; }

/* ===== Leave — balance tiles + request rows ===== */
.emp-bal { border: 1px solid var(--emp-line); border-radius: 14px; padding: .8rem .9rem; background: var(--emp-surface); }
.emp-bal-name { font-size: .8rem; color: var(--emp-muted); font-weight: 600; }
.emp-bal-val { font-size: 1.5rem; font-weight: 700; color: var(--emp-ink); line-height: 1.1; margin-top: .15rem; }
.emp-bal-unit { font-size: .78rem; font-weight: 500; color: var(--emp-muted); }
.emp-bal-bar { height: 5px; border-radius: 20px; background: var(--lx-surface-2, #f1f3f9); overflow: hidden; margin-top: .55rem; }
.emp-bal-bar > i { display: block; height: 100%; border-radius: 20px; background: var(--emp-accent); }
.emp-bal-sub { font-size: .75rem; color: var(--emp-muted); margin-top: .35rem; }

.emp-req { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; }
.emp-reqs-list .emp-req + .emp-req { border-top: 1px solid var(--emp-line); }
.emp-req-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(79, 70, 229, .1); color: var(--emp-accent); font-size: 1.1rem; }
.emp-req-main { flex: 1 1 auto; min-width: 0; }
.emp-req-title { font-weight: 620; color: var(--emp-ink); }
.emp-req-sub { font-size: .82rem; color: var(--emp-muted); margin-top: .1rem; }

/* ===== Empty / coming-soon states ===== */
.emp-state-ic { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(79, 70, 229, .1); color: var(--emp-accent); font-size: 1.9rem; }
.emp-state-ic--warn { background: rgba(245, 158, 11, .13); color: #b45309; }

/* ===== Guest (login / activate) ===== */
.emp-guest-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
.emp-guest-card { width: 100%; max-width: 410px; background: var(--emp-surface); border-radius: 18px; box-shadow: 0 18px 50px -20px rgba(16, 24, 40, .35), 0 1px 3px rgba(16, 24, 40, .06); padding: 30px 28px; border: 1px solid rgba(255, 255, 255, .6); }
/* ===== Guest sign-in — Pacific theme (married to the tenant /login) ===== */
/* Scoped to body.emp-guest so the authenticated portal keeps its own palette.  */
body.emp-guest {
    --a2-ocean: #0E4C5C; --a2-ocean-hover: #0B3D4A; --a2-ocean-active: #092F3A;
    --a2-lagoon: #2AA198; --a2-ink: #0B2027; --a2-sand: #FAF6EF;
    --a2-line: #DAD2C4; --a2-text-body: #3A3730; --a2-text-muted: #6B6558;
    background:
        radial-gradient(120% 60% at 50% -10%, rgba(42, 161, 152, .10), transparent 60%),
        var(--a2-sand);
    font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--a2-ink);
}
body.emp-guest .emp-guest-card {
    background: #fff; border: 1px solid #E4DCD0; border-radius: 16px;
    box-shadow: 0 18px 50px -24px rgba(11, 32, 39, .30), 0 1px 3px rgba(11, 32, 39, .06);
    padding: 32px 30px;
}
body.emp-guest .emp-guest-card h1 { color: var(--a2-ink); font-weight: 800; letter-spacing: -.02em; }
body.emp-guest .form-label { font-size: 13px; font-weight: 600; color: var(--a2-text-body); }
body.emp-guest .form-control {
    height: 50px; padding: 0 15px; border: 1px solid var(--a2-line); border-radius: 10px;
    font-size: 15px; color: var(--a2-ink);
}
body.emp-guest .form-control:focus { border-color: var(--a2-ocean); box-shadow: 0 0 0 3px rgba(14, 76, 92, .12); }
body.emp-guest .btn-primary {
    height: 50px; border: 0; border-radius: 10px; background: var(--a2-ocean);
    color: var(--a2-sand); font-weight: 700; font-size: 16px; letter-spacing: .01em;
}
body.emp-guest .btn-primary:hover { background: var(--a2-ocean-hover); }
body.emp-guest .btn-primary:active { background: var(--a2-ocean-active); }
body.emp-guest .btn-primary:focus-visible { outline: 2px solid var(--a2-ocean); outline-offset: 2px; }
body.emp-guest a { color: var(--a2-ocean); }

/* Sign-in form — mirrors the tenant /login form column. */
body.emp-guest .emp-signin-title { margin: 0 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--a2-ink); text-align: left; }
body.emp-guest .emp-signin-sub { margin: 0 0 26px; font-size: 15px; color: var(--a2-text-muted); text-align: left; }
body.emp-guest .emp-signin-form { display: flex; flex-direction: column; gap: 16px; }
body.emp-guest .emp-field { display: flex; flex-direction: column; gap: 7px; }
body.emp-guest .emp-label { font-size: 13px; font-weight: 600; color: var(--a2-text-body); }
body.emp-guest .emp-pw-wrap { position: relative; display: flex; }
body.emp-guest .emp-pw-wrap .form-control { padding-right: 74px; }
body.emp-guest .emp-pw-toggle {
    position: absolute; right: 8px; top: 9px; height: 32px; padding: 0 10px;
    border: 0; border-radius: 7px; background: #F1EBE0; color: #5C574D;
    font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
body.emp-guest .emp-pw-toggle:hover { background: #E6DECF; }
body.emp-guest .emp-pw-toggle:focus-visible { outline: 2px solid var(--a2-ocean); outline-offset: 2px; }
body.emp-guest .emp-signin-form .btn-primary { margin-top: 10px; }

/* Password requirement hints on activation */
.emp-reqs { list-style: none; margin: .4rem 0 0; padding: 0; }
.emp-reqs li { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--emp-muted); padding: .1rem 0; }
.emp-reqs li i { font-size: .95rem; }

/* A7.1 — field-help hint icon (shared field_hint component), portal scope. */
.hr-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .25rem;
    vertical-align: middle;
    line-height: 1;
    color: var(--bs-secondary-color, #6c757d);
    cursor: help;
    border-radius: 50%;
}
.hr-hint > i { font-size: 1rem; }
.hr-hint:hover, .hr-hint:focus { color: var(--bs-primary, #4338ca); }
.hr-hint:focus-visible { outline: 2px solid var(--bs-primary, #4338ca); outline-offset: 2px; }

/* ============================================================
   A9.2 — Action Centre (bell, nav badges, dashboard panel, modal)
   Severity is never colour-only: every item pairs an icon + text
   (and required items carry a "Required" tag).
   ============================================================ */

/* Severity accents (shared) */
.emp-sev-critical { --sev: #d92d20; --sev-bg: rgba(217, 45, 32, .10); }
.emp-sev-action   { --sev: #4F46E5; --sev-bg: rgba(79, 70, 229, .10); }
.emp-sev-info     { --sev: #0369a1; --sev-bg: rgba(3, 105, 161, .09); }

/* ----- Topbar bell ----- */
.emp-actions { position: relative; }
.emp-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--emp-line); background: #fff; color: #334155; cursor: pointer; }
.emp-bell:hover { color: var(--emp-accent); border-color: rgba(79, 70, 229, .35); }
.emp-bell:focus-visible { outline: 2px solid var(--emp-accent); outline-offset: 2px; }
.emp-bell > i { font-size: 1.25rem; }
.emp-bell-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #d92d20; color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.emp-bell-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 340px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--emp-line); border-radius: 14px; box-shadow: 0 20px 46px -20px rgba(16, 24, 40, .45), 0 2px 6px rgba(16, 24, 40, .06); overflow: hidden; z-index: 40; }
.emp-bell-menu[hidden] { display: none; }
.emp-bell-head { padding: .7rem .9rem; font-weight: 700; font-size: .85rem; color: var(--emp-ink); border-bottom: 1px solid var(--emp-line); }
.emp-bell-empty { padding: 1.1rem .9rem; color: var(--emp-muted); font-size: .9rem; display: flex; align-items: center; }
.emp-bell-empty i { color: #16a34a; font-size: 1.1rem; }
.emp-bell-item { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .9rem; text-decoration: none; color: inherit; border-bottom: 1px solid #f1f3f8; border-left: 3px solid var(--sev, transparent); }
.emp-bell-item:last-of-type { border-bottom: 0; }
.emp-bell-item:hover { background: var(--sev-bg, #f7f8fc); }
.emp-bell-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--sev-bg, #f1f3f9); color: var(--sev, var(--emp-muted)); font-size: 1rem; }
.emp-bell-txt { min-width: 0; display: flex; flex-direction: column; }
.emp-bell-title { font-weight: 640; color: var(--emp-ink); font-size: .88rem; }
.emp-bell-desc { font-size: .78rem; color: var(--emp-muted); overflow: hidden; text-overflow: ellipsis; }
.emp-bell-more { display: block; padding: .6rem .9rem; text-align: center; font-size: .82rem; font-weight: 600; color: var(--emp-accent); text-decoration: none; background: #fafbff; }

/* ----- Nav badges ----- */
.emp-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: .35rem; padding: 0 5px; border-radius: 999px; background: #d92d20; color: #fff; font-size: .68rem; font-weight: 700; }

/* ----- Dashboard action panel ----- */
.emp-actions-panel { border-color: rgba(79, 70, 229, .30) !important; box-shadow: 0 10px 30px -22px rgba(79, 70, 229, .8) !important; }
.emp-actions-panel .card-header .card-title { color: var(--emp-ink); }
.emp-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: #d92d20; color: #fff; font-weight: 700; font-size: .82rem; }
.emp-act-group + .emp-act-group { margin-top: 1rem; }
.emp-act-group-head { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--emp-muted); margin-bottom: .5rem; }
.emp-act-row { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid var(--emp-line); border-left: 3px solid var(--sev, var(--emp-line)); border-radius: 12px; background: #fff; }
.emp-act-row + .emp-act-row { margin-top: .5rem; }
.emp-act-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--sev-bg, #f1f3f9); color: var(--sev, var(--emp-muted)); font-size: 1.15rem; }
.emp-act-body { flex: 1 1 auto; min-width: 0; }
.emp-act-title { font-weight: 640; color: var(--emp-ink); overflow-wrap: anywhere; }
.emp-act-desc { font-size: .82rem; color: var(--emp-muted); overflow-wrap: anywhere; }
.emp-act-due { color: #b45309; font-weight: 600; }
.emp-req-tag { display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #b42318; background: rgba(217, 45, 32, .1); border-radius: 6px; padding: .05rem .35rem; vertical-align: middle; }
.emp-act-btn { flex: 0 0 auto; white-space: nowrap; }

/* ----- Caught-up ----- */
.emp-caught-up { border-color: rgba(22, 163, 74, .3) !important; }
.emp-caught-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(22, 163, 74, .12); color: #16a34a; font-size: 1.5rem; }

/* ----- Action modal ----- */
.emp-modal-item { display: flex; align-items: center; gap: .65rem; padding: .7rem .35rem; text-decoration: none; color: inherit; border-bottom: 1px solid #f1f3f8; border-left: 3px solid var(--sev, transparent); padding-left: .6rem; border-radius: 8px; }
.emp-modal-item:last-child { border-bottom: 0; }
.emp-modal-item:hover { background: var(--sev-bg, #f7f8fc); }
.emp-modal-txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.emp-modal-chev { color: #cbd5e1; flex: 0 0 auto; }

/* ============================================================
   Responsive audit — 390 (mobile) / 768 (tablet) / 1440 (desktop)
   No horizontal overflow; usable nav, forms, buttons, modal, bell.
   ============================================================ */
body.emp-portal, body.emp-guest { overflow-x: hidden; }
.emp-portal img { max-width: 100%; height: auto; }
.emp-nav .emp-container { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.emp-nav .emp-container::-webkit-scrollbar { display: none; }

@media (max-width: 767.98px) {
    .emp-container { padding-left: 12px; padding-right: 12px; }
    .emp-nav-link { padding: .7rem .7rem; font-size: .88rem; }
    .emp-bell-menu { position: fixed; left: 10px; right: 10px; top: 60px; width: auto; max-width: none; max-height: 72vh; overflow-y: auto; }
}

@media (max-width: 575.98px) {
    .emp-hero-title { font-size: 1.25rem; }
    .emp-dl { grid-template-columns: 1fr; }
    .emp-act-row { flex-wrap: wrap; }
    .emp-act-btn { width: 100%; margin-top: .55rem; }
    .emp-main { padding-top: 16px; }
    /* Comfortable full-width inputs + tap targets on phones */
    .emp-main .form-control, .emp-main .form-select { min-height: 44px; font-size: 1rem; }
    .emp-main .btn { min-height: 42px; }
    .modal-footer .btn { width: 100%; }
    .modal-footer { flex-direction: column-reverse; }
}

/* ============================================================
   A9.3 — Dashboard Intelligence: wider container + real-data widgets
   (CSS/inline-SVG only; no charting library)
   ============================================================ */

/* Wider container for the dashboard only; other pages stay calm at 900px */
body.emp-wide .emp-container { max-width: 1240px; }

.emp-widgets .card-body { display: flex; flex-direction: column; }
.emp-w-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; font-weight: 600; }

/* SVG progress ring */
.emp-ring { position: relative; width: 76px; height: 76px; flex: 0 0 auto; }
.emp-ring svg { display: block; }
.emp-ring-track { fill: none; stroke: #e9edf5; stroke-width: 8; }
.emp-ring-val { fill: none; stroke: var(--emp-accent); stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.emp-ring.is-success .emp-ring-val { stroke: #16a34a; }
.emp-ring.is-warn .emp-ring-val { stroke: #d97706; }
.emp-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.emp-ring-num { font-size: 1.05rem; font-weight: 800; color: var(--emp-ink); line-height: 1; }
.emp-ring-sub { font-size: .6rem; text-transform: uppercase; letter-spacing: .03em; color: var(--emp-muted); }

.emp-w-ring { display: flex; align-items: center; gap: .9rem; margin-bottom: .6rem; }
.emp-w-side { min-width: 0; display: flex; flex-direction: column; gap: .3rem; flex-wrap: wrap; }
.emp-w-num { font-weight: 700; color: var(--emp-ink); }

/* Per-type leave bars */
.emp-w-bar + .emp-w-bar { margin-top: .45rem; }
.emp-w-bar-top { display: flex; justify-content: space-between; font-size: .78rem; margin-bottom: .18rem; }
.emp-w-bar-track { height: 6px; border-radius: 20px; background: #eef1f6; overflow: hidden; }
.emp-w-bar-track > i { display: block; height: 100%; border-radius: 20px; background: var(--emp-accent); }

/* Chips (never colour-only: they always carry a number/label) */
.emp-chip { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .12rem .5rem; background: #eef1f6; color: #475569; white-space: nowrap; }
.emp-chip--accent { background: rgba(79, 70, 229, .12); color: #4338ca; }
.emp-chip--danger { background: rgba(217, 45, 32, .12); color: #b42318; }
.emp-chip--warn { background: rgba(217, 119, 6, .14); color: #b45309; }
.emp-chip--success { background: rgba(22, 163, 74, .13); color: #15803d; }
.emp-chip--neutral { background: #eef1f6; color: #64748b; }

/* Next leave */
.emp-next-big { font-size: 1.5rem; font-weight: 800; color: var(--emp-ink); letter-spacing: -.01em; line-height: 1.1; }
.emp-next-empty { text-align: center; padding: .4rem 0 .2rem; }
.emp-w-cta { display: inline-block; margin-top: .5rem; font-size: .82rem; font-weight: 700; color: var(--emp-accent); }
.emp-caught-ic--sm { width: 40px; height: 40px; font-size: 1.25rem; }

/* Key dates strip */
.emp-keydates { display: flex; flex-wrap: wrap; gap: .6rem; }
.emp-keydate { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border: 1px solid var(--emp-line); border-radius: 12px; background: #fff; flex: 1 1 220px; min-width: 0; }
.emp-keydate-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(79, 70, 229, .1); color: var(--emp-accent); font-size: 1.15rem; }
.emp-keydate-label { font-weight: 640; color: var(--emp-ink); }
.emp-keydate-sub { font-size: .78rem; color: var(--emp-muted); overflow-wrap: anywhere; }

/* Compliance expiry */
.emp-expiry { border-color: rgba(217, 119, 6, .35) !important; }
.emp-expiry-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.emp-expiry-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border: 1px solid var(--emp-line); border-left: 3px solid var(--sev, var(--emp-line)); border-radius: 12px; background: #fff; flex: 1 1 240px; min-width: 0; }

/* Payslips coming-soon */
.emp-soon { position: relative; }
.emp-soon-tag { display: inline-block; margin-top: .1rem; font-size: .72rem; font-weight: 700; color: #94a3b8; background: #f1f3f9; border-radius: 6px; padding: .1rem .45rem; }

@media (max-width: 575.98px) {
    .emp-w-ring { flex-wrap: wrap; }
    .emp-next-big { font-size: 1.3rem; }
    .emp-keydate { flex-basis: 100%; }
}

/* ============================================================
   Phase D — Attendance (portal)
   ============================================================ */
.emp-clock-card { border-color: rgba(79, 70, 229, .25) !important; }
.emp-clock-state { font-weight: 600; color: var(--emp-ink); }
.emp-clock-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #16a34a; margin-right: .4rem; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); animation: emp-pulse 1.8s ease-in-out infinite; }
@keyframes emp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.emp-clock-hours { font-size: 1.35rem; font-weight: 800; color: var(--emp-ink); line-height: 1; }
.emp-att-row { display: flex; align-items: flex-start; gap: .75rem; }
.emp-att-row .lx-pill { white-space: nowrap; }