/* ================================================================
   FUNNELATICS — EMPLOYEE SELF-SERVICE PORTAL
   Font: Plus Jakarta Sans  |  Brand: #3CD0A1
   ================================================================ */

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

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ── Work Mint design tokens ────────────────────────────────────────────
     Canonical definitions live in static/shared/css/theme.css. The existing
     variable NAMES are kept and remapped to the new palette so ~3,250 lines
     of rules and ~4,000 inline styles pick up the rebrand without being
     rewritten — renaming them would be a far larger, riskier diff for no
     visual gain. New code should use the semantic names from theme.css. */

  /* Brand — Mint Crisp.
     --brand is a FILL colour: at 1.96:1 on white it fails WCAG AA as text.
     --brand-text is the only mint safe for text on light (5.09:1). */
  --brand: #3CD0A1;
  --brand-dark: #2FAE85;
  --brand-text: #247C60;
  --brand-bg: rgba(60, 208, 161, .12);

  /* Action accent — Electric Violet, reserved for primary CTAs.
     The 600 step, not #7578DF: white on #7578DF is 4.47:1 and misses AA. */
  --cta: #6768DB;
  --cta-hover: #4F51C9;
  --cta-bg: #F0F1FC;
  --cta-text: #4338CA;

  /* Typography & neutrals */
  --text: #1E293B;
  --text-1: #1E293B;
  --text-2: #475569;
  --muted: #8A94A6;
  --muted-2: #94A3B8;
  --border: #E2E8F0;
  --surface: #F8FAFC;
  --tint: #E6F9F3;
  --white: #FFFFFF;
  --sidebar-w: 264px;
  --topbar-h: 60px;

  /* Dark chrome — Deep Anchor sidebar/header shell */
  --navy: #24272C;
  --navy-1: #292C32;
  --navy-2: #31353C;
  --navy-3: #3C4149;
  --navy-border: rgba(255, 255, 255, .08);
  --navy-text: #94A3B8;
  --navy-text-dim: #8A94A6;
  --navy-text-bright: #F1F5F9;

  --shadow-sm: 0 1px 3px rgba(11, 19, 43, .06), 0 1px 2px rgba(11, 19, 43, .04);
  --shadow: 0 4px 16px rgba(11, 19, 43, .08);
  --radius: 10px;
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Status colours stay outside the brand: users read red as error and
     amber as warning. Success is mint, per the brand spec. */
  --c-present: #2FAE85;
  --c-absent: #D85B5B;
  --c-leave: #CF9431;
  --c-wfh: #7578DF;
  --c-holiday: #9474DE;
  --c-late: #C4A02E;
  --c-nr: #5989D8;
  --c-future: #E2E8F0;
  --c-weekend: #F1F5F9;
}

html,
body {
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font);
}

svg {
  display: block;
  flex-shrink: 0;
}

img {
  display: block;
}

/* ════════════ LAYOUT ════════════ */
.ep-layout {
  display: flex;
  min-height: 100vh;
}

/* ════════════ SIDEBAR ════════════ */
.ep-sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(190deg, var(--navy) 0%, var(--navy-1) 100%);
  border-right: 1px solid var(--navy-border);
  box-shadow: 4px 0 24px rgba(0, 8, 16, .18);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform .25s ease;
}

.ep-logo {
  height: var(--topbar-h);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--navy-border);
  flex-shrink: 0;
}

.ep-logo img {
  height: 28px;
}

.ep-logo-text {
  font-weight: 700;
  font-size: 17px;
  color: var(--brand);
  letter-spacing: -.3px;
}

.ep-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--navy-3) transparent;
}

.ep-nav::-webkit-scrollbar { width: 6px; }
.ep-nav::-webkit-scrollbar-track { background: transparent; }
.ep-nav::-webkit-scrollbar-thumb { background: var(--navy-3); border-radius: 3px; }

.ep-nav-section {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--navy-text-dim);
  padding: 18px 22px 8px;
}

.ep-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px 10px 19px;
  margin: 2px 12px;
  border-radius: 9px;
  color: var(--navy-text);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -.1px;
  transition: background .15s ease, color .15s ease;
}

.ep-nav-item svg {
  width: 18px;
  height: 18px;
  color: var(--navy-text-dim);
  transition: color .15s ease;
}

.ep-nav-item:hover {
  background: var(--navy-2);
  color: var(--navy-text-bright);
}

.ep-nav-item:hover svg {
  color: var(--brand);
}

.ep-nav-item.active {
  background: linear-gradient(90deg, rgba(60, 208, 161, .22) 0%, rgba(60, 208, 161, .07) 100%);
  color: #fff;
  font-weight: 600;
}

.ep-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
  box-shadow: 0 0 8px rgba(60, 208, 161, .7);
}

.ep-nav-item.active svg {
  color: var(--brand);
}

.ep-sidebar-footer {
  padding: 14px 16px 18px;
  border-top: 1px solid var(--navy-border);
}

.ep-sidebar-footer a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--navy-text);
  font-weight: 500;
  transition: background .15s, color .15s;
}

.ep-sidebar-footer a:hover {
  background: rgba(239, 68, 68, .16);
  color: #EDB4B4;
}

.ep-sidebar-footer a svg {
  width: 16px;
  height: 16px;
}

/* ════════════ MAIN ════════════ */
.ep-main {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* prevent page-level horizontal scroll; tables scroll inside their own containers */
}

/* ════════════ TOPBAR ════════════ */
.ep-topbar {
  height: var(--topbar-h);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.ep-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ep-hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 6px;
}

.ep-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-2);
  border-radius: 2px;
}

.ep-page-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.ep-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ep-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ep-user-info {
  text-align: right;
}

.ep-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.ep-user-role {
  font-size: 11px;
  color: var(--muted);
  display: block;
}

.ep-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-bg);
  color: var(--brand);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.ep-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ════════════ PAGE CONTENT ════════════ */
.ep-content {
  flex: 1;
  padding: 28px 36px;
  width: 100%;
}

/* ════════════ PAGE HEADER ════════════ */
.ep-page-header {
  margin-bottom: 24px;
}

.ep-page-header h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}

.ep-page-header p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}

/* ════════════ CARDS ════════════ */
.ep-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.ep-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ep-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.ep-card-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}

.ep-card-body {
  padding: 20px;
}

/* ════════════ STAT CHIPS (dashboard) ════════════ */
.ep-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.ep-stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ep-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ep-stat-icon svg {
  width: 18px;
  height: 18px;
}

.ep-stat-val {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.ep-stat-lbl {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.ep-stat-card.present .ep-stat-icon {
  background: #E6F9F3;
  color: var(--c-present);
}

.ep-stat-card.present .ep-stat-val {
  color: var(--c-present);
}

.ep-stat-card.absent .ep-stat-icon {
  background: #F9E7E7;
  color: var(--c-absent);
}

.ep-stat-card.absent .ep-stat-val {
  color: var(--c-absent);
}

.ep-stat-card.leave .ep-stat-icon {
  background: #E6F9F3;
  color: var(--c-leave);
}

.ep-stat-card.leave .ep-stat-val {
  color: var(--c-leave);
}

.ep-stat-card.att .ep-stat-icon {
  background: var(--brand-bg);
  color: var(--brand);
}

.ep-stat-card.att .ep-stat-val {
  color: var(--brand);
}

/* ════════════ DASHBOARD GRID ════════════ */
.ep-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ep-dash-full {
  grid-column: 1 / -1;
}

/* Today's status banner */
.ep-today-banner {
  background: linear-gradient(135deg, var(--brand) 0%, #D79C56 100%);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  margin-bottom: 24px;
}

.ep-today-left h2 {
  font-size: 18px;
  font-weight: 800;
}

.ep-today-left p {
  font-size: 13px;
  opacity: .85;
  margin-top: 2px;
}

.ep-today-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, .22);
  color: white;
  border: 1px solid rgba(255, 255, 255, .3);
}

.ep-today-meta {
  display: flex;
  gap: 24px;
}

.ep-today-meta-item {
  text-align: center;
}

.ep-today-meta-item .val {
  font-size: 18px;
  font-weight: 800;
}

.ep-today-meta-item .lbl {
  font-size: 11px;
  opacity: .8;
  margin-top: 1px;
}

/* ════════════ LEAVE BALANCE CHIPS ════════════ */
.ep-leave-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ep-leave-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  min-width: 130px;
}

.ep-leave-chip-name {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.ep-leave-chip-bal {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand);
  margin-top: 2px;
}

.ep-leave-chip-total {
  font-size: 11px;
  color: var(--muted-2);
}

/* ════════════ TABLE ════════════ */
.ep-table-wrap {
  overflow-x: auto;
}

.ep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ep-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.ep-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-2);
}

.ep-table tr:last-child td {
  border-bottom: none;
}

.ep-table tr:hover td {
  background: var(--surface);
}

/* ════════════ BADGES ════════════ */
.ep-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.ep-badge.pending {
  background: #F3F0CE;
  color: #774C1C;
}

.ep-badge.manager-approved {
  background: #E1EBF8;
  color: #2745A6;
}

.ep-badge.approved {
  background: #E6F9F3;
  color: #196A51;
}

.ep-badge.rejected {
  background: #F9E7E7;
  color: #7E1E1E;
}

.ep-badge.cancelled {
  background: #F1F5F9;
  color: var(--muted);
}

/* ════════════ ATTENDANCE CALENDAR ════════════ */
.ep-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ep-cal-nav-month {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.ep-cal-nav-arrows {
  display: flex;
  gap: 8px;
}

.ep-cal-arrow {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: var(--white);
  transition: background .15s, color .15s;
  font-size: 18px;
  font-weight: 600;
}

.ep-cal-arrow:hover {
  background: var(--surface);
  color: var(--text);
}

.ep-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.ep-cal-day-header {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  padding-bottom: 6px;
}

.ep-cal-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  cursor: default;
  position: relative;
  border: 2px solid transparent;
  transition: border-color .15s;
  min-height: 44px;
}

.ep-cal-cell .day-num {
  font-size: 13px;
  font-weight: 700;
}

.ep-cal-cell .day-icon {
  font-size: 10px;
  margin-top: 2px;
}

.ep-cal-cell.today {
  border-color: var(--brand) !important;
}

.ep-cal-cell.present {
  background: #E6F9F3;
  color: #196A51;
}

.ep-cal-cell.absent {
  background: #F9E7E7;
  color: #AD2828;
}

.ep-cal-cell.leave {
  background: #E6F9F3;
  color: #A74C27;
}

.ep-cal-cell.wfh {
  background: #E1EBF8;
  color: #2F56C6;
}

.ep-cal-cell.holiday {
  background: #F1F4FC;
  color: #4338ca;
}

.ep-cal-cell.half_day {
  background: #F3F0CE;
  color: #774C1C;
}

.ep-cal-cell.not_recorded {
  background: #F2F6FC;
  color: #2F56C6;
}

.ep-cal-cell.weekend {
  background: var(--surface);
  color: var(--muted-2);
}

.ep-cal-cell.future {
  background: var(--surface);
  color: var(--muted-2);
}

.ep-cal-cell.empty {
  background: transparent;
}

.ep-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.ep-cal-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.ep-cal-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ════════════ ATT STATS STRIP ════════════ */
.ep-att-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.ep-att-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
}

.ep-att-chip strong {
  font-weight: 800;
  font-size: 17px;
}

.ep-att-chip.present strong {
  color: #2FAE85;
}

.ep-att-chip.absent strong {
  color: #CF3333;
}

.ep-att-chip.leave strong {
  color: #3E6CD2;
}

.ep-att-chip.late strong {
  color: #247C60;
}

.ep-att-chip.wfh strong {
  color: #8251D6;
}

.ep-att-chip.holiday strong {
  color: #CF3378;
}

/* ════════════ LEAVE APPLY FORM ════════════ */
.ep-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ep-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ep-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ep-form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}

.ep-input,
.ep-select,
.ep-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}

.ep-input:focus,
.ep-select:focus,
.ep-textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(60, 208, 161, .12);
}

.ep-textarea {
  resize: vertical;
  min-height: 80px;
}

/* ════════════ BUTTONS ════════════ */
.ep-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  border: none;
  text-decoration: none;
}

.ep-btn-primary {
  background: var(--cta);
  color: white;
}

.ep-btn-primary:hover {
  background: var(--cta-hover);
}

.ep-btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
}

.ep-btn-outline:hover {
  background: var(--surface);
}

.ep-btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

/* ════════════ PROFILE ════════════ */
.ep-profile-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: linear-gradient(135deg, var(--brand) 0%, #D79C56 100%);
  border-radius: var(--radius);
  color: white;
  margin-bottom: 24px;
}

.ep-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid rgba(255, 255, 255, .4);
}

.ep-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ep-profile-name {
  font-size: 22px;
  font-weight: 800;
}

.ep-profile-sub {
  font-size: 13px;
  opacity: .85;
  margin-top: 3px;
}

.ep-profile-chips {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ep-profile-chip {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .3);
}

.ep-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ep-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ep-detail-row {
  display: flex;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  font-size: 13px;
}

.ep-detail-row:last-child {
  border-bottom: none;
}

.ep-detail-key {
  width: 150px;
  flex-shrink: 0;
  color: var(--muted);
  font-weight: 500;
}

.ep-detail-val {
  color: var(--text);
  font-weight: 600;
}

/* ════════════ PAYSLIP ════════════ */
.ep-payslip-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ep-payslip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}

.ep-payslip-row:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-bg);
}

.ep-payslip-period {
  font-weight: 700;
  font-size: 14px;
}

.ep-payslip-net {
  font-weight: 800;
  color: var(--brand);
  font-size: 15px;
}

.ep-payslip-status {
  font-size: 11px;
}

.ep-slip-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.ep-slip-section {
  margin-bottom: 20px;
}

.ep-slip-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.ep-slip-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.ep-slip-row:last-child {
  border-bottom: none;
}

.ep-slip-row.total {
  font-weight: 800;
  font-size: 14px;
}

.ep-slip-row.net {
  font-weight: 800;
  font-size: 16px;
  color: var(--brand);
}

/* ════════════ LOGIN PAGE ════════════ */
.ep-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #E6F9F3 0%, #FDFBF7 60%, #F3F8FC 100%);
  padding: 24px;
}

.ep-login-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .10);
  padding: 40px 44px;
  width: 100%;
  max-width: 420px;
}

.ep-login-logo {
  text-align: center;
  margin-bottom: 28px;
}

.ep-login-logo img {
  height: 34px;
  margin: 0 auto;
}

.ep-login-logo .ep-login-logo-text {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand);
}

.ep-login-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.ep-login-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 28px;
}

.ep-login-error {
  background: #F9E7E7;
  border: 1px solid #EDB4B4;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #AD2828;
  margin-bottom: 16px;
}

.ep-login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ep-login-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 5px;
  display: block;
}

.ep-login-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.ep-login-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(60, 208, 161, .12);
}

.ep-login-btn {
  width: 100%;
  padding: 12px;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  margin-top: 4px;
  transition: background .15s;
}

.ep-login-btn:hover {
  background: var(--brand-dark);
}

.ep-login-admin {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
}

.ep-login-admin a {
  color: var(--brand);
  font-weight: 600;
}

/* ════════════ ALERTS ════════════ */
.ep-alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

.ep-alert.success {
  background: #E6F9F3;
  border: 1px solid #90E5AF;
  color: #196A51;
}

.ep-alert.error {
  background: #F9E7E7;
  border: 1px solid #EDB4B4;
  color: #7E1E1E;
}

/* ════════════ EMPTY STATE ════════════ */
.ep-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.ep-empty svg {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  opacity: .4;
}

.ep-empty p {
  font-size: 14px;
}

/* ════════════ PROGRESS BAR ════════════ */
.ep-progress {
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.ep-progress-bar {
  height: 100%;
  border-radius: 99px;
  background: var(--brand);
}

.ep-progress-bar.green {
  background: var(--c-present);
}

.ep-progress-bar.red {
  background: var(--c-absent);
}

/* ════════════ DASHBOARD TOP LAYOUT ════════════ */
.ep-dash-top {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
}

.ep-dash-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ════════════ PUNCH WIDGET ════════════ */
.ep-punch-card {
  background: linear-gradient(145deg, var(--navy-3) 0%, var(--navy) 100%);
  border-radius: 16px;
  padding: 24px;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  box-sizing: border-box;
}

.ep-punch-name {
  font-size: 17px;
  font-weight: 800;
}

.ep-punch-date {
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  margin-top: 3px;
  font-weight: 500;
}

.ep-punch-clock {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  color: white;
  line-height: 1;
}

.ep-punch-clock-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(255, 255, 255, .4);
  margin-top: 5px;
}

.ep-punch-times {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, .07);
  border-radius: 12px;
  padding: 14px 16px;
  gap: 8px;
}

.ep-punch-time-item {
  flex: 1;
}

.ep-punch-time-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 5px;
}

.ep-punch-time-val {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, .4);
}

.ep-punch-time-val.ep-punch-time-set {
  color: white;
}

.ep-punch-source {
  font-size: 10px;
  color: rgba(255, 255, 255, .4);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.ep-punch-source::before {
  content: '📱';
  font-size: 9px;
}

.ep-punch-elapsed-wrap {
  flex: 1;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, .1);
  border-right: 1px solid rgba(255, 255, 255, .1);
  padding: 0 12px;
}

.ep-punch-elapsed {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.ep-punch-badge {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}

.ep-punch-badge-late {
  background: rgba(239, 68, 68, .25);
  color: #EDB4B4;
}

.ep-punch-badge-early {
  background: rgba(251, 146, 60, .25);
  color: #E4B98D;
}

.ep-punch-shift {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .45);
  font-weight: 500;
}

.ep-punch-actions {
  display: flex;
  gap: 10px;
}

.ep-punch-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  transition: opacity .15s, transform .1s;
}

.ep-punch-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
}

.ep-punch-btn:active {
  transform: translateY(0);
}

.ep-punch-btn-in {
  background: var(--cta);
  color: white;
}

.ep-punch-btn-out {
  background: #D85B5B;
  color: white;
}

.ep-punch-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border-radius: 10px;
  background: rgba(34, 197, 94, .15);
  color: #54D7AE;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
}

/* ════════════ LEAVE BALANCE CARDS ════════════ */
.ep-balance-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .15s, box-shadow .15s;
}

.ep-balance-card:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 16px rgba(60, 208, 161, .1);
}

.ep-balance-icon {
  color: var(--brand);
  margin-bottom: 4px;
}

.ep-balance-icon svg {
  width: 22px;
  height: 22px;
}

.ep-balance-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.ep-balance-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 2px;
}

.ep-balance-val {
  font-size: 30px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
}

.ep-balance-of {
  font-size: 12px;
  color: var(--muted-2);
}

/* ════════════ DAY PILL (leave form) ════════════ */
.ep-day-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-bg);
  border: 1px solid rgba(60, 208, 161, .3);
  color: var(--brand);
  border-radius: 20px;
  padding: 8px 16px;
  font-weight: 700;
}

#day-count-num {
  font-size: 22px;
  line-height: 1;
}

#day-count-lbl {
  font-size: 12px;
  opacity: .8;
}

/* ════════════ HORIZONTAL ATTENDANCE GRID ════════════ */
.ep-hgrid-wrap {
  overflow-x: auto;
  padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
}

.ep-hgrid {
  display: flex;
  gap: 4px;
  min-width: max-content;
  padding: 2px 0;
}

.ep-hgrid-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 38px;
  flex-shrink: 0;
}

.ep-hgrid-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ep-hgrid-col.is-today .ep-hgrid-num {
  background: var(--brand);
  color: white;
}

.ep-hgrid-day {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .2px;
}

.ep-hgrid-cell {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: default;
  transition: transform .12s;
  font-size: 13px;
}

.ep-hgrid-cell:hover {
  transform: scale(1.15);
  z-index: 1;
  position: relative;
}

/* ── Attendance hover tooltip ── */
.ep-att-tip {
  position: fixed;
  z-index: 9999;
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(60, 208, 161, .30);
  opacity: 0;
  transition: opacity .12s ease;
  letter-spacing: .2px;
}

.ep-tip-late {
  color: #D5AE4A;
  font-weight: 700;
  margin-left: 2px;
}

.ep-hgrid-cell.present {
  background: #E6F9F3;
  color: #2FAE85;
}

.ep-hgrid-cell.present.late {
  background: #FCF7F0;
  color: #A74C27;
}

.ep-hgrid-cell.absent {
  background: #F9E7E7;
  color: #CF3333;
}

.ep-hgrid-cell.leave {
  background: #E1EBF8;
  color: #3E6CD2;
}

.ep-hgrid-cell.wfh {
  background: #EFECFB;
  color: #8251D6;
}

.ep-hgrid-cell.holiday {
  background: #FAE9F3;
  color: #CF3378;
}

.ep-hgrid-cell.half_day {
  background: #D2F5ED;
  color: #1F827A;
}

.ep-hgrid-cell.not_recorded {
  background: #fff;
  color: #94A3B8;
  border: 1.5px solid #E2E8F0;
}

.ep-hgrid-cell.weekend {
  background: #F1F5F9;
  color: #94A3B8;
}

.ep-hgrid-cell.future {
  background: #F8FAFC;
  color: #CBD5E1;
}

.ep-hgrid-late-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C4A02E;
}

/* ════════════ PAYSLIP HERO ════════════ */
.ep-ps-hero {
  background: linear-gradient(145deg, var(--navy-3) 0%, var(--navy) 100%);
  border-radius: 16px;
  padding: 28px 32px;
  color: white;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.ep-ps-hero-blob1 {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 220px;
  height: 220px;
  background: var(--brand);
  border-radius: 50%;
  opacity: .08;
  pointer-events: none;
}

.ep-ps-hero-blob2 {
  position: absolute;
  bottom: -60px;
  left: 30%;
  width: 280px;
  height: 280px;
  background: #5989D8;
  border-radius: 50%;
  opacity: .05;
  pointer-events: none;
}

.ep-ps-hero-inner {
  position: relative;
  z-index: 1;
}

.ep-ps-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ep-ps-hero-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(255, 255, 255, .4);
  margin-bottom: 4px;
}

.ep-ps-hero-period {
  font-size: 18px;
  font-weight: 800;
}

.ep-ps-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(34, 197, 94, .2);
  color: #54D7AE;
  border: 1px solid rgba(34, 197, 94, .3);
  flex-shrink: 0;
}

.ep-ps-hero-badge.pending {
  background: rgba(245, 158, 11, .2);
  color: #D5AE4A;
  border-color: rgba(245, 158, 11, .3);
}

.ep-ps-hero-net {
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
}

.ep-ps-hero-net-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, .35);
  margin-top: 4px;
  font-weight: 500;
}

.ep-ps-hero-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin: 20px 0;
}

.ep-ps-hero-row {
  display: flex;
  align-items: center;
  gap: 32px;
}

.ep-ps-hero-stat-val {
  font-size: 20px;
  font-weight: 800;
}

.ep-ps-hero-stat-val.green {
  color: #54D7AE;
}

.ep-ps-hero-stat-val.red {
  color: #E38686;
}

.ep-ps-hero-stat-lbl {
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  margin-top: 2px;
}

/* ════════════ PAYSLIP LIST ITEMS ════════════ */
.ep-ps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ep-ps-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  color: inherit;
  text-decoration: none;
}

.ep-ps-item:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 20px rgba(60, 208, 161, .1);
  transform: translateY(-1px);
}

.ep-ps-item-icon {
  width: 44px;
  height: 44px;
  background: var(--brand-bg);
  color: var(--brand);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ep-ps-item-icon svg {
  width: 20px;
  height: 20px;
}

.ep-ps-item-period {
  font-size: 15px;
  font-weight: 700;
}

.ep-ps-item-date {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.ep-ps-item-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

.ep-ps-item-net {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
}

.ep-ps-item-net-lbl {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.ep-ps-item-amt-val {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.ep-ps-item-amt-val.green {
  color: var(--c-present);
}

.ep-ps-item-amt-val.red {
  color: var(--c-absent);
}

.ep-ps-item-amt-lbl {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.ep-ps-item-arrow {
  color: var(--brand);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ════════════ DASHBOARD STAT CARD ACCENTS ════════════ */
.ep-stat-card {
  position: relative;
  overflow: hidden;
}

.ep-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
}

.ep-stat-card.att::before {
  background: var(--brand);
}

.ep-stat-card.present::before {
  background: var(--c-present);
}

.ep-stat-card.absent::before {
  background: var(--c-absent);
}

.ep-stat-card.leave::before {
  background: var(--c-leave);
}

/* ════════════ SALARY BLUR (manager view) ════════════ */
.ep-salary-blur {
  filter: blur(5px);
  transition: filter .2s ease;
  cursor: default;
  user-select: none;
  display: inline-block;
}

.ep-salary-blur:hover {
  filter: blur(0);
}

/* ════════════ MOBILE ════════════ */
.ep-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 90;
}

@media (max-width: 900px) {
  .ep-dash-top {
    grid-template-columns: 1fr;
  }

  .ep-dash-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ════════════ SMALL BUTTON ════════════ */
.ep-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--brand-bg);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(60, 208, 161, .3);
  transition: background .15s, border-color .15s;
  cursor: pointer;
}

.ep-btn-sm:hover {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}

/* ════════════ TEAM ATTENDANCE TABLE ════════════ */
.ep-month-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.ep-month-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-1);
  font-size: 16px;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.ep-month-btn:hover {
  background: var(--brand-bg);
  border-color: var(--brand);
  color: var(--brand);
}

.ep-month-label {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
}

.ep-att-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
}

.ep-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}

.ep-team-att-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  /* isolate horizontal scroll so it stays inside the card, not the page */
  display: block;
}

.ep-team-att-table {
  border-collapse: collapse;
  min-width: max-content;
  width: 100%;
}

.ep-team-att-table thead th {
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  padding: 6px 2px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.ep-team-att-name-col {
  width: 230px;
  min-width: 230px;
  max-width: 230px;
  text-align: left !important;
  padding-left: 16px !important;
  padding-right: 8px !important;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--white);
  border-right: 2px solid var(--border);
  overflow: hidden;
}

thead .ep-team-att-name-col {
  background: var(--surface) !important;
  z-index: 5;
}

.ep-team-att-summary-col {
  min-width: 130px;
  position: sticky;
  right: 0;
  z-index: 3;
  background: var(--white);
  border-left: 1px solid var(--border);
  padding: 0 12px;
  text-align: center;
}

thead .ep-team-att-summary-col {
  background: var(--surface) !important;
  z-index: 5;
}

.ep-team-att-day-th {
  width: 38px;
  min-width: 38px;
}

.ep-team-att-table tbody tr {
  border-bottom: 1px solid var(--border);
}

.ep-team-att-table tbody tr:last-child {
  border-bottom: none;
}

.ep-team-att-table tbody tr:hover .ep-team-att-name-col,
.ep-team-att-table tbody tr:hover .ep-team-att-summary-col {
  background: var(--brand-bg);
}

.ep-team-att-cell-td {
  padding: 6px 1px;
  text-align: center;
}

.ep-day-weekend {
  opacity: .5;
}

.ep-day-today {
  background: rgba(60, 208, 161, .04);
}

.ep-team-att-table thead .ep-day-today {
  background: rgba(60, 208, 161, .1);
}

.is-today-num {
  background: var(--brand);
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2px;
  font-size: 11px;
  font-weight: 800;
}

.ep-team-att-day-th .ep-hgrid-num {
  margin: 0 auto 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}

.ep-team-att-day-th .ep-hgrid-day {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted-2);
  text-transform: uppercase;
}

.ep-team-att-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  overflow: hidden;
}

.ep-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.ep-team-att-member>div:last-child {
  min-width: 0;
  overflow: hidden;
}

.ep-team-att-empname {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-team-att-dept {
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-team-att-summary {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
}

.ep-summ-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
}

.ep-summ-badge.present {
  background: #E6F9F3;
  color: #196A51;
}

.ep-summ-badge.absent {
  background: #F9E7E7;
  color: #AD2828;
}

.ep-summ-badge.leave {
  background: #E6F9F3;
  color: #A74C27;
}

.ep-summ-badge.wfh {
  background: #E1EBF8;
  color: #2F56C6;
}

/* ════════════════════════════════════════════════════════════
   HR ADMIN PANEL
════════════════════════════════════════════════════════════ */

/* HR sidebar accent */
.hr-sidebar .ep-logo {
  border-bottom: 1px solid var(--navy-border);
}

.hr-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hr-logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--brand);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hr-logo-sub {
  font-size: 10px;
  color: var(--brand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.2;
}

.hr-topbar {
  border-bottom-color: rgba(60, 208, 161, .15);
}

/* ── HR Stat Cards ── */
.hr-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.hr-stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  overflow: hidden;
  border-top: 3px solid transparent;
}

.hr-stat-card.blue {
  border-top-color: #5989D8;
}

.hr-stat-card.green {
  border-top-color: #2FAE85;
}

.hr-stat-card.accent {
  border-top-color: var(--brand);
}

.hr-stat-card.purple {
  border-top-color: #A76FDD;
}

.hr-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hr-stat-card.blue .hr-stat-icon {
  background: #F2F6FC;
  color: #5989D8;
}

.hr-stat-card.green .hr-stat-icon {
  background: #F1FCF4;
  color: #2FAE85;
}

.hr-stat-card.accent .hr-stat-icon {
  background: var(--brand-bg);
  color: var(--brand);
}

.hr-stat-card.purple .hr-stat-icon {
  background: #FAF7FD;
  color: #A76FDD;
}

.hr-stat-body {
  flex: 1;
}

.hr-stat-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -1px;
  line-height: 1.1;
}

.hr-stat-lbl {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
  margin-top: 3px;
}

.hr-stat-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  position: absolute;
  bottom: 14px;
  right: 14px;
}

.hr-stat-badge.green {
  background: #E6F9F3;
  color: #196A51;
}

.hr-stat-badge.blue {
  background: #E1EBF8;
  color: #2745A6;
}

.hr-stat-badge.gray {
  background: var(--surface);
  color: var(--text-2);
}

/* ── Two-col layout ── */
.hr-two-col {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  align-items: start;
}

/* ── HR Table ── */
.hr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hr-table thead th {
  background: var(--surface);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.hr-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.hr-table tbody tr:last-child td {
  border-bottom: none;
}

.hr-table tbody tr:hover {
  background: var(--brand-bg);
}

.hr-table tfoot td {
  padding: 12px 14px;
  border-top: 2px solid var(--border);
}

/* ── Department bar ── */
.hr-dept-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.hr-dept-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  min-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hr-dept-bar-wrap {
  flex: 1;
  background: var(--surface);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}

.hr-dept-bar {
  height: 100%;
  background: var(--brand);
  border-radius: 4px;
  transition: width .4s;
  min-width: 4px;
}

.hr-dept-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  min-width: 24px;
  text-align: right;
}

/* ── Action buttons ── */
.hr-action-btn {
  padding: 5px 12px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: background .15s, transform .1s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hr-action-btn:active {
  transform: scale(.95);
}

.hr-action-btn.approve {
  background: #E6F9F3;
  color: #196A51;
}

.hr-action-btn.approve:hover {
  background: #2FAE85;
  color: white;
}

.hr-action-btn.reject {
  background: #F9E7E7;
  color: #AD2828;
}

.hr-action-btn.reject:hover {
  background: #D85B5B;
  color: white;
}

/* ── Filters ── */
.hr-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hr-search-wrap {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0 12px;
  height: 38px;
}

.hr-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text-1);
  outline: none;
}

.hr-search-input::placeholder {
  color: var(--text-2);
}

.hr-select {
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-1);
  font-size: 13px;
  padding: 0 12px;
  outline: none;
  cursor: pointer;
}

.hr-select:focus {
  border-color: var(--brand);
}

.hr-filter-btn {
  height: 38px;
  padding: 0 18px;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}

.hr-filter-btn:hover {
  opacity: .9;
}

.hr-clear-btn {
  height: 38px;
  padding: 0 14px;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* ── Tabs ── */
.hr-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 0;
}

.hr-tab {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}

.hr-tab:hover {
  color: var(--brand);
}

.hr-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.hr-tab-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  background: #F9E7E7;
  color: #AD2828;
}

.hr-tab-badge.blue {
  background: #E1EBF8;
  color: #2745A6;
}

.hr-tab-badge.green {
  background: #E6F9F3;
  color: #196A51;
}

/* ── Employee type badge ── */
.hr-type-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.hr-type-badge.permanent {
  background: #E6F9F3;
  color: #196A51;
}

.hr-type-badge.probation {
  background: #F3F0CE;
  color: #774C1C;
}

.hr-type-badge.contract {
  background: #E1EBF8;
  color: #2745A6;
}

.hr-type-badge.intern {
  background: #FAF7FD;
  color: #7D2EC2;
}

/* ── Empty state ── */
.hr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
}

/* ── Profile hero ── */
.hr-profile-hero {
  background: linear-gradient(135deg, var(--navy-3) 0%, var(--navy) 100%);
  border-radius: 16px;
  padding: 28px 32px;
  color: white;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hr-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
}

.hr-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hr-profile-meta {
  flex: 1;
  min-width: 200px;
}

.hr-profile-name {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.hr-profile-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, .5);
  margin-top: 4px;
}

.hr-profile-stats {
  display: flex;
  gap: 28px;
  flex-shrink: 0;
}

.hr-profile-stat {
  text-align: center;
}

.hr-profile-stat-val {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.hr-profile-stat-lbl {
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
  margin-top: 4px;
  font-weight: 500;
}

/* ── Detail grid ── */
.hr-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.hr-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}

.hr-info-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 3px;
}

.hr-info-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}

/* ── Salary rows ── */
.hr-salary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
}

.hr-salary-row:last-child {
  border-bottom: none;
}

.hr-salary-row.total {
  font-weight: 800;
  color: var(--text-1);
  border-top: 2px solid var(--border);
  border-bottom: none;
  margin-top: 4px;
}

.hr-salary-val {
  font-weight: 700;
  color: var(--text-1);
}

/* ── Leave balance rows ── */
.hr-leave-bal-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.hr-leave-bal-row:last-child {
  border-bottom: none;
}

/* ── Modal ── */
.hr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.hr-modal {
  background: var(--white);
  border-radius: 16px;
  width: 440px;
  max-width: 95vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  overflow: hidden;
}

.hr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.hr-modal-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-1);
}

.hr-modal-close {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.hr-modal-body {
  padding: 20px 24px;
}

.hr-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-1);
  resize: vertical;
  outline: none;
  background: var(--surface);
  box-sizing: border-box;
}

.hr-textarea:focus {
  border-color: var(--brand);
}

.hr-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.hr-modal-cancel {
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.hr-modal-submit {
  padding: 9px 20px;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}

.hr-modal-submit.approve {
  background: #2FAE85;
  color: white;
}

.hr-modal-submit.approve:hover {
  background: #2FAE85;
}

.hr-modal-submit.reject {
  background: #D85B5B;
  color: white;
}

.hr-modal-submit.reject:hover {
  background: #CF3333;
}

/* ── HR Forms ── */
.hr-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hr-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hr-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.hr-form-row+.hr-form-row,
.hr-form-row+.hr-form-group,
.hr-form-group+.hr-form-row,
.hr-form-group+.hr-form-group {
  margin-top: 4px;
}

.hr-form-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1;
}

.hr-required {
  color: #D85B5B;
}

.hr-form-input {
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: 14px;
  color: var(--text-1);
  background: var(--surface);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}

.hr-form-input:focus {
  border-color: var(--brand);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .10);
}

.hr-form-input.error {
  border-color: #D85B5B;
}

.hr-form-input.hr-textarea {
  height: auto;
  padding: 11px 14px;
  resize: vertical;
  line-height: 1.6;
}

textarea.hr-form-input {
  height: auto;
  padding: 11px 14px;
  line-height: 1.6;
}

.hr-form-error {
  font-size: 11px;
  color: #D85B5B;
  margin-top: 2px;
}

.hr-checkbox-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  cursor: pointer;
}

.hr-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
}

/* extra badge colors for HR */
.ep-badge.locked {
  background: var(--navy);
  color: var(--navy-text);
}

.ep-badge.draft {
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.ep-badge.active {
  background: #E6F9F3;
  color: #196A51;
}

.ep-badge.inactive {
  background: #F9E7E7;
  color: #AD2828;
}

.ep-badge.onboarding {
  background: #E1EBF8;
  color: #2745A6;
}

.ep-badge.on-leave {
  background: #E6F9F3;
  color: #A74C27;
}

.ep-badge.permanent {
  background: #E6F9F3;
  color: #196A51;
}

.ep-badge.probation {
  background: #F3F0CE;
  color: #774C1C;
}

.ep-badge.contract {
  background: #E1EBF8;
  color: #2745A6;
}

.ep-badge.intern {
  background: #FAF7FD;
  color: #7D2EC2;
}

.ep-badge.published {
  background: #E6F9F3;
  color: #196A51;
}

.ep-badge.processing {
  background: #F3F0CE;
  color: #774C1C;
}

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 768px) {
  .ep-sidebar {
    transform: translateX(-100%);
  }

  .ep-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .12);
  }

  .ep-overlay.visible {
    display: block;
  }

  .ep-main {
    margin-left: 0;
  }

  .ep-hamburger {
    display: flex;
  }

  .ep-content {
    padding: 20px 16px;
  }

  .ep-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ep-dash-grid {
    grid-template-columns: 1fr;
  }

  .hr-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hr-two-col {
    grid-template-columns: 1fr;
  }

  .hr-detail-grid {
    grid-template-columns: 1fr;
  }

  .hr-info-grid {
    grid-template-columns: 1fr;
  }

  .hr-profile-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .hr-profile-stats {
    flex-wrap: wrap;
    gap: 16px;
  }

  .ep-profile-grid {
    grid-template-columns: 1fr;
  }

  .ep-slip-header {
    grid-template-columns: 1fr;
  }

  .ep-form-row {
    grid-template-columns: 1fr;
  }

  .ep-cal-cell {
    min-height: 34px;
    font-size: 11px;
  }

  .ep-user-info {
    display: none;
  }

  .ep-punch-clock {
    font-size: 32px;
  }
}
/* ════════════════════════════════════════════════════════════════════════
   COLLAPSIBLE SIDEBAR
   ════════════════════════════════════════════════════════════════════════

   The HR sidebar carries forty-odd links. On a laptop that is a quarter of
   the screen permanently spent on navigation, which is what the rail is for.

   ONE TOKEN drives both the card and the main column. The collapsed state is
   stamped on the ROOT element and redefines --sidebar-w there, so the sidebar
   and the content offset move together from one place. Two separate widths
   drift apart the first time either is touched.
   ──────────────────────────────────────────────────────────────────────── */

:root { --sidebar-rail-w: 72px; --sidebar-gap: 12px; }

html.nav-rail { --sidebar-w: var(--sidebar-rail-w); }

/* A floating card on the page ground rather than a panel welded to the window
   edge: inset on all four sides, rounded, with its own border and shadow. */
.ep-sidebar {
  top: var(--sidebar-gap);
  left: var(--sidebar-gap);
  bottom: var(--sidebar-gap);
  width: calc(var(--sidebar-w) - var(--sidebar-gap));
  border-radius: 16px;
  border: 1px solid var(--navy-border);
  box-shadow: 0 8px 28px rgba(0, 8, 16, .22);
  overflow: visible;             /* the toggle pill straddles the edge */
  transition: width .22s ease, transform .25s ease;
}

.ep-sidebar .ep-nav { border-radius: 0 0 16px 16px; }
.ep-logo { border-radius: 16px 16px 0 0; }

/* ── the toggle ───────────────────────────────────────────────────────── */
.ep-rail-toggle {
  position: absolute;
  top: 74px;
  right: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--navy-border);
  background: var(--navy-1);
  color: var(--navy-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 8, 16, .28);
  transition: background .15s ease, color .15s ease;
}
.ep-rail-toggle:hover { background: var(--navy-2); color: var(--navy-text-bright); }
.ep-rail-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ep-rail-toggle svg { width: 13px; height: 13px; transition: transform .22s ease; }
html.nav-rail .ep-rail-toggle svg { transform: rotate(180deg); }

/* ── the two brand marks ──────────────────────────────────────────────────
   A horizontal wordmark squashed to 40px is an illegible smear, so the rail
   gets a square symbol instead of a shrunken logo. */
.ep-logo-mark-rail { display: none; }
html.nav-rail .ep-logo { padding: 18px 0; justify-content: center; }
html.nav-rail .ep-logo-mark-full { display: none; }
html.nav-rail .ep-logo-mark-rail { display: block; height: 26px; width: auto; }

/* ── the rail ─────────────────────────────────────────────────────────── */
html.nav-rail .ep-nav-label { display: none; }

/* The language picker needs words: a label, a select wide enough to read an
   option in, and a button. None of that fits a 72px rail, and trying produced
   a clipped "LANGUAGE" with the Apply button hanging off the side of the
   panel. Hidden while collapsed; expanding the rail brings it back, which is
   the same bargain every other label here makes. */
html.nav-rail .wm-lang { display: none; }

html.nav-rail .ep-nav-item {
  justify-content: center;
  gap: 0;
  padding: 11px 0;
  margin: 3px 10px;
}
html.nav-rail .ep-nav-item.active::before { display: none; }

/* A group heading has no room for its words, so it becomes the divider line
   it was already acting as. */
html.nav-rail .ep-nav-section {
  font-size: 0;
  padding: 10px 18px;
  height: 1px;
  overflow: hidden;
  border-top: 1px solid var(--navy-border);
  margin: 8px 0;
  box-sizing: content-box;
}

html.nav-rail .ep-sidebar-footer a { justify-content: center; }
html.nav-rail .ep-sidebar-footer a .ep-nav-label { display: none; }

/* ── the rail tooltip ─────────────────────────────────────────────────────
   Appended to <body>, NOT to the nav. The nav scrolls, and a scroll container
   clips on BOTH axes, so a CSS ::after tooltip is cut off at exactly the card
   edge where it needs to appear. Positioned from the hovered item's bounding
   rectangle instead. */
.ep-rail-tip {
  position: fixed;
  z-index: 2000;
  background: var(--navy-1, #16233a);
  color: #fff;
  border: 1px solid var(--navy-border, #26364f);
  border-radius: 7px;
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: 0 6px 18px rgba(0, 8, 16, .3);
}
.ep-rail-tip.show { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .ep-sidebar, .ep-rail-toggle svg, .ep-rail-tip { transition: none; }
}

/* ── phones ───────────────────────────────────────────────────────────────
   A rail is a desktop affordance. Below the breakpoint the saved collapsed
   state must be overridden explicitly, or a phone inherits a 72px strip. */
@media (max-width: 768px) {
  html.nav-rail { --sidebar-w: 264px; }
  .ep-sidebar {
    top: 0; left: 0; bottom: 0;
    width: 264px;
    border-radius: 0;
    border: 0;
  }
  html.nav-rail .wm-lang { display: flex; }
  html.nav-rail .ep-nav-label,
  html.nav-rail .ep-sidebar-footer a .ep-nav-label { display: inline; }
  html.nav-rail .ep-nav-item { justify-content: flex-start; gap: 11px; padding: 10px 16px 10px 19px; }
  html.nav-rail .ep-nav-section { font-size: 10.5px; height: auto; border-top: 0; padding: 18px 22px 8px; }
  html.nav-rail .ep-logo { padding: 18px 22px; justify-content: flex-start; }
  html.nav-rail .ep-logo-mark-full { display: block; }
  html.nav-rail .ep-logo-mark-rail { display: none; }
  .ep-rail-toggle { display: none; }
  .ep-rail-tip { display: none; }
}

/* ── back link ────────────────────────────────────────────────────────────
   Shown on screens the sidebar does not list. Sits above the page title
   rather than beside it: it is a route out, not part of the heading, and a
   heading that changes width as you move between sections is unsettling. */
.ep-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2, #475569);
  text-decoration: none;
  margin-bottom: 2px;
  padding: 2px 0;
  transition: color .15s ease;
}
.ep-back:hover { color: var(--brand, #2C7A7B); }
.ep-back:focus-visible { outline: 2px solid var(--brand, #2C7A7B); outline-offset: 2px; border-radius: 3px; }
.ep-back svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* ── first-run tour bar ───────────────────────────────────────────────────
   Shown to a self-serve signup until they finish or dismiss it. Sits between
   the header and the page content, in the flow rather than fixed over it: a
   floating card would cover the very screen the step is telling them to look
   at, which is the one mistake a product tour cannot afford. */
.wm-tour {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 16px 32px 0;
  padding: 14px 18px;
  border: 1px solid #A8E5D0;
  border-left: 4px solid #3CD0A1;
  border-radius: 12px;
  background: linear-gradient(180deg, #F3FCF8, #E9F9F2);
}
.wm-tour-body { display: flex; align-items: flex-start; gap: 14px; min-width: 260px; flex: 1 1 420px; }
.wm-tour-count {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-width: 46px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #3CD0A1;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.wm-tour-count span { font-size: 11px; font-weight: 700; opacity: .8; }
.wm-tour-title { font-size: 14px; font-weight: 800; color: #14532D; margin-bottom: 2px; }
.wm-tour-copy { font-size: 12.5px; line-height: 1.55; color: #2F4F44; max-width: 70ch; }
.wm-tour-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.wm-tour-actions form { margin: 0; }
.wm-tour-next {
  padding: 9px 22px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #7EE8C4, #3CD0A1);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: filter .15s ease;
}
.wm-tour-next:hover { filter: brightness(1.05); }
.wm-tour-skip {
  padding: 9px 16px;
  border: 1.5px solid #A8E5D0;
  border-radius: 999px;
  background: transparent;
  color: #247C60;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.wm-tour-skip:hover { background: #E6F9F3; }
.wm-tour-next:focus-visible,
.wm-tour-skip:focus-visible { outline: 2px solid #247C60; outline-offset: 2px; }

@media (max-width: 720px) {
  .wm-tour { margin: 12px 16px 0; }
  .wm-tour-actions { width: 100%; }
  .wm-tour-actions form, .wm-tour-next, .wm-tour-skip { flex: 1 1 auto; width: 100%; }
}

/* ── language switcher ────────────────────────────────────────────────────
   A plain form with a select and a button, deliberately. It has to work on a
   shared terminal on a factory floor and for the person whose reason for
   needing it is that they cannot read the English label on a fancier control.
   In the sidebar it sits above the footer; on sign-in, above the note. */
.wm-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin: 0;
}
.wm-lang-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2, #94A3B8);
  /* Its own line. In a 264px sidebar the label, the select and the button do
     not fit across one, and letting them try is what carried Apply past the
     edge of the panel. */
  flex: 1 0 100%;
}
.wm-lang-select {
  /* Basis 0, not auto. With auto the select is sized by its longest option,
     and the list includes "Chinese (Simplified)" and "Portuguese (Brazil)".
     That intrinsic width is wider than the space there is, so the row
     overflowed and took the button out of the sidebar with it. Basis 0 means
     the select takes the room that is left rather than the room it wants. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text, #1E293B);
  font-family: inherit;
  font-size: 12.5px;
}
.wm-lang-go {
  flex: 0 0 auto;
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: var(--brand, #3CD0A1);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.wm-lang-go:hover { filter: brightness(1.05); }
.wm-lang-select:focus-visible,
.wm-lang-go:focus-visible { outline: 2px solid var(--brand-text, #247C60); outline-offset: 2px; }

/* The sidebar is dark, so the label needs to be legible against it. */
#sidebar .wm-lang-label { color: rgba(255,255,255,.55); }

/* Right-to-left: the whole layout mirrors, and these are the pieces whose
   direction is set in CSS rather than inherited from dir="rtl". */
[dir="rtl"] .wm-lang { flex-direction: row-reverse; }
[dir="rtl"] .ep-back svg { transform: scaleX(-1); }

/* ── the classes templates were already using ──────────────────────────────
   .btn, .btn-primary, .ep-page-head, .ep-page-sub and .muted appear across
   the HR templates and were never defined anywhere. Nothing errored: an
   unknown class is simply no style, so "Add" and "Post to everyone" rendered
   as plain text that looked like a label rather than a button, and nobody had
   reason to look for a stylesheet rule that had never existed.

   Matched to .hr-form-input so a button sits level with the field beside it:
   same 42px height, same radius, same border weight. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding: 0 18px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--surface, #fff);
  color: var(--text-1, #1E293B);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .15s ease, background .15s ease, filter .15s ease;
}
.btn:hover { border-color: var(--brand, #3CD0A1); }
.btn:focus-visible { outline: 2px solid var(--brand-text, #247C60); outline-offset: 2px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-primary {
  background: var(--brand, #3CD0A1);
  border-color: var(--brand, #3CD0A1);
  color: #fff;
}
.btn-primary:hover { filter: brightness(1.05); border-color: var(--brand, #3CD0A1); }

/* A page's own heading, above whatever cards follow it. */
.ep-page-head { margin: 0 0 18px; }
.ep-page-head .ep-page-title { display: block; font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.ep-page-sub { margin: 0; font-size: 13.5px; color: var(--text-2, #64748B); line-height: 1.5; }

/* Secondary text. Used in dozens of templates and never defined. */
.muted { color: var(--text-2, #64748B); }

/* "Show me around" in the sidebar footer. A form, because restarting the tour
   writes state and a link that did would be followed by anything that
   prefetches. Styled to sit beside Logout as though it were one. */
.ep-tour-again { margin: 0; }
.ep-tour-again button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}