/* Employee persona (part A) — Dashboard, My Profile, My Attendance, Leave Management. Only what app.css / styles.css lack. Tokens only. */
.ea-hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;align-items:start}
.ea-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.ea-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.ea-side{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.ea-edit{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.ea-col{display:flex;flex-direction:column;gap:20px;min-width:0}
@media (max-width:1200px){.ea-hero,.ea-3,.ea-2,.ea-side,.ea-edit{grid-template-columns:1fr}}
/* Profile · View hero: cover band + large avatar + Personal Details tiles */
.ea-profile{position:relative;overflow:hidden;padding-top:0}
.ea-cover{height:72px;margin:0 -20px;background:linear-gradient(90deg,var(--bg-brand),var(--bg-secondary))}
.avatar.ea-av{width:64px;height:64px;font-size:20px;position:absolute;left:20px;top:40px;box-shadow:0 0 0 4px var(--bg-surface)}
.ea-pill{padding:8px 12px;align-items:center;gap:0;background:var(--bg-brand-subtle);min-width:88px}
.ea-pill b{color:var(--text-primary)}
.ea-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ea-tiles .subtle-box{display:flex;flex-direction:column;gap:4px;min-width:0}
.ea-tiles .k{font-size:12px;line-height:16px;font-weight:600;color:var(--text-secondary)}
.ea-tiles .v{font-weight:600;display:flex;align-items:center;gap:6px;overflow-wrap:anywhere}
@media (max-width:1200px){.ea-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ea-eye{border:0;background:none;padding:0;display:flex;cursor:pointer;color:var(--text-brand)}
.ea-eye:hover{color:var(--bg-brand-hover)}
/* two-column key–value grid (Figma KV grid inside detail cards) */
.ea-kv2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.ea-kv2 .kv .v{overflow-wrap:anywhere;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* Exit Organisation (Profile · View): error-tinted card, white icon tile */
.card.ea-exit{background:var(--error-bg)}
.card.ea-exit .card-head .tile{background:var(--bg-surface);color:var(--error-text)}
.card.ea-exit .t-cap.t-sec{color:var(--error-text)}
/* used / remaining bar: used = neutral, remaining = brand (legend Used / Remaining) */
.ea-bar{display:flex;height:8px;border-radius:var(--r-full);overflow:hidden;gap:2px}
.ea-bar i{display:block;height:100%;border-radius:var(--r-full);transition:width var(--dur-slow) var(--ease-standard)}
.ea-bar i.u{background:var(--border-strong)}
.ea-bar i.u[style*="width:0%"]{display:none}
.ea-bar i.r{flex:1;background:var(--bg-brand)}
.ea-key{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}
.ea-key::before{content:'';width:8px;height:8px;border-radius:var(--r-full);background:var(--bg-brand)}
.ea-key.used::before{background:var(--border-strong)}
/* expandable table rows (Leave tracker) */
.tbl tr.ea-click{cursor:pointer}
.tbl tr.ea-exp>td{background:var(--bg-surface)!important;padding-top:8px;padding-bottom:12px}
.tbl tr.ea-exp .stepper{max-width:560px}
/* leave type tiles */
.ea-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.opt[disabled]{opacity:.5;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-default)}
/* Calendar day · status blocks: extra tones (every block carries an icon; same size via .cday .blk) */
.blk.neutral{background:var(--neutral-bg);color:var(--neutral-text)}
.blk.sky{background:var(--sky-bg);color:var(--sky-text)}
.blk.slate{background:var(--slate-bg);color:var(--slate-text)}
.blk span{font-weight:600}
/* dashboard calendar head: month switch + Today beside the title, legend on the right (§33) */
.ea-cal>.card-head .ttl{flex:none}
.ea-wide-stepper .step .lb{white-space:normal}
/* Profile · View (Figma 5180:29303): masked IDs stay on one line, sentence-case field labels, balance rows as subtle boxes */
.ea-tiles{gap:8px}
.ea-tiles .subtle-box{padding:10px 10px}
.ea-tiles .v{overflow-wrap:normal;white-space:nowrap;font-size:13px;gap:4px}
.ea-tiles .v .ea-eye{flex:none}
.ea-kv2 .kv .k{text-transform:none;letter-spacing:0;font-weight:400}
.ea-kv2 .kv .v{overflow-wrap:normal}
.ea-balrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px}
/* Profile · View (Figma 5180:29303): masked IDs stay on one line, sentence-case field labels, balance rows as subtle boxes */
.ea-tiles{gap:8px}
.ea-tiles .subtle-box{padding:10px 10px}
.ea-tiles .v{overflow-wrap:normal;white-space:nowrap;font-size:13px;gap:4px}
.ea-tiles .v .ea-eye{flex:none}
.ea-kv2 .kv .k{text-transform:none;letter-spacing:0;font-weight:400}
.ea-kv2 .kv .v{overflow-wrap:normal}
.ea-balrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px}

/* ---- Leave Management (11 Nov 2026) ---- */
.ea-bar i.r{flex:none;background:var(--bg-brand)}
.ea-bar i.u{flex:1;background:var(--border-strong)}
.ea-chev{display:inline-flex;color:var(--text-tertiary);transition:transform var(--dur-base) var(--ease-standard)}
.ea-chev.open{transform:rotate(180deg);color:var(--text-brand)}
.ea-track{width:100%;max-width:760px;margin:0 auto}
/* leave-type tiles: category colours (design system §2.4 · leave types) */
.opt.lt-indigo{background:var(--indigo-bg);color:var(--indigo-text)}.opt.lt-pink{background:var(--pink-bg);color:var(--pink-text)}
.opt.lt-sky{background:var(--sky-bg);color:var(--sky-text)}.opt.lt-brown{background:var(--brown-bg);color:var(--brown-text)}
.opt.lt-plum{background:var(--plum-bg);color:var(--plum-text)}.opt.lt-olive{background:var(--olive-bg);color:var(--olive-text)}
.opt[class*="lt-"] .o-m{color:inherit;opacity:.8}
.opt[class*="lt-"].on{box-shadow:inset 0 0 0 2px var(--border-brand)}
.opt[class*="lt-"][disabled]{opacity:.5}