Leave Request

Employee leave request cards with status indicators, date ranges, duration, approval actions, and a request form with leave type selector.

Pending Request

Preview

Maria Lopez

Product Designer

ERPlora — Design Team

Pending

Vacation

From Mar 10 Monday

To Mar 14 Friday

5 business days

Reason

Family vacation to the coast. All pending tasks have been delegated to Carlos.

Submitted Feb 28, 2026

<div class="leave-request leave-request-pending">
  <div class="leave-request-header">
    <div class="leave-request-avatar">
      <div style="width:40px;height:40px;border-radius:50%;background:var(--color-neutral);color:var(--color-neutral-content);display:flex;align-items:center;justify-content:center;font-weight:600;">ML</div>
    </div>
    <div class="leave-request-employee">
      <p class="leave-request-name">Maria Lopez</p>
      <p class="leave-request-role">Product Designer</p>
      <p class="leave-request-department">ERPlora &mdash; Design Team</p>
    </div>
    <div class="leave-request-status">
      <span class="leave-request-status-badge leave-request-status-badge-pending">
        <span class="leave-request-status-dot"></span>
        Pending
      </span>
    </div>
  </div>
  <div class="leave-request-body">
    <span class="leave-request-type leave-request-type-vacation">Vacation</span>
    <div class="leave-request-dates" style="margin-top:1rem;">
      <div class="leave-request-date">
        <span class="leave-request-date-label">From</span>
        <span class="leave-request-date-value">Mar 10</span>
        <span class="leave-request-date-day">Monday</span>
      </div>
      <div class="leave-request-dates-arrow">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </div>
      <div class="leave-request-date">
        <span class="leave-request-date-label">To</span>
        <span class="leave-request-date-value">Mar 14</span>
        <span class="leave-request-date-day">Friday</span>
      </div>
    </div>
    <div class="leave-request-duration">
      <span class="leave-request-duration-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
      </span>
      <span class="leave-request-duration-value">5</span>
      <span class="leave-request-duration-label">business days</span>
    </div>
    <div class="leave-request-reason">
      <span class="leave-request-reason-label">Reason</span>
      <p class="leave-request-reason-text">Family vacation to the coast. All pending tasks have been delegated to Carlos.</p>
    </div>
    <div class="leave-request-meta">
      <span class="leave-request-meta-item">
        <span class="leave-request-meta-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
        </span>
        Submitted Feb 28, 2026
      </span>
    </div>
  </div>
  <div class="leave-request-actions">
    <button class="leave-request-action leave-request-action-approve">
      <span class="leave-request-action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg></span>
      Approve
    </button>
    <button class="leave-request-action leave-request-action-reject">
      <span class="leave-request-action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></span>
      Reject
    </button>
    <button class="leave-request-action leave-request-action-secondary">Details</button>
  </div>
</div>

Requires: ux.min.css

<div class="relative flex flex-col w-full max-w-md overflow-hidden bg-base-100 rounded-box shadow-sm">
  <div class="absolute top-0 left-0 w-1 h-full bg-warning rounded-l-box"></div>
  <div class="flex items-start gap-4 p-6 pb-4">
    <div class="w-10 h-10 rounded-full bg-neutral text-neutral-content flex items-center justify-center font-semibold shrink-0">ML</div>
    <div class="flex-1 min-w-0">
      <p class="font-semibold text-lg m-0 leading-tight">Maria Lopez</p>
      <p class="text-sm text-base-content/60 mt-1 mb-0">Product Designer</p>
      <p class="text-xs text-base-content/40 mt-1 mb-0">ERPlora &mdash; Design Team</p>
    </div>
    <span class="inline-flex items-center gap-1 px-2 py-1 text-xs font-semibold rounded-full bg-warning/15 text-warning">
      <span class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></span>
      Pending
    </span>
  </div>
  <div class="px-6">
    <span class="inline-flex items-center gap-1 px-2 py-1 text-xs font-semibold uppercase tracking-wide rounded bg-blue-500/12 text-blue-600">Vacation</span>
    <div class="flex items-center gap-4 p-4 bg-base-200 rounded-lg mt-4 mb-4">
      <div class="flex-1 text-center">
        <span class="block uppercase text-xs text-base-content/40 tracking-wide mb-1">From</span>
        <span class="block font-semibold">Mar 10</span>
        <span class="block text-xs text-base-content/60 mt-0.5">Monday</span>
      </div>
      <svg class="w-6 h-6 text-base-content/40 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      <div class="flex-1 text-center">
        <span class="block uppercase text-xs text-base-content/40 tracking-wide mb-1">To</span>
        <span class="block font-semibold">Mar 14</span>
        <span class="block text-xs text-base-content/60 mt-0.5">Friday</span>
      </div>
    </div>
    <div class="flex items-center justify-center gap-2 px-4 py-2 bg-base-300 rounded-lg mb-4">
      <svg class="w-4 h-4 text-base-content/60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
      <span class="font-semibold">5</span>
      <span class="text-sm text-base-content/60">business days</span>
    </div>
    <div class="p-4 bg-base-200 rounded-lg mb-4 border-l-3 border-base-300">
      <span class="block text-xs font-semibold uppercase text-base-content/60 tracking-wide mb-1">Reason</span>
      <p class="text-sm m-0 leading-relaxed">Family vacation to the coast. All pending tasks have been delegated to Carlos.</p>
    </div>
    <div class="flex flex-wrap gap-4 py-2 text-xs text-base-content/40">
      <span class="flex items-center gap-1">Submitted Feb 28, 2026</span>
    </div>
  </div>
  <div class="flex gap-2 px-6 py-4 border-t border-base-300 bg-base-200">
    <button class="flex-1 inline-flex items-center justify-center gap-1 h-9 px-4 text-sm font-semibold bg-success text-success-content rounded-lg hover:brightness-90">Approve</button>
    <button class="flex-1 inline-flex items-center justify-center gap-1 h-9 px-4 text-sm font-semibold bg-error text-error-content rounded-lg hover:brightness-90">Reject</button>
    <button class="flex-1 inline-flex items-center justify-center h-9 px-4 text-sm font-semibold bg-base-100 text-base-content/60 border border-base-300 rounded-lg hover:bg-base-200">Details</button>
  </div>
</div>

Requires: tw.min.css

// Approve / reject actions
document.querySelectorAll('.leave-request-action-approve').forEach(btn => {
  btn.addEventListener('click', () => {
    const card = btn.closest('.leave-request');
    card.classList.remove('leave-request-pending');
    card.classList.add('leave-request-approved');
    const badge = card.querySelector('.leave-request-status-badge');
    badge.className = 'leave-request-status-badge leave-request-status-badge-approved';
    badge.innerHTML = '<span class="leave-request-status-dot"></span> Approved';
  });
});

document.querySelectorAll('.leave-request-action-reject').forEach(btn => {
  btn.addEventListener('click', () => {
    const card = btn.closest('.leave-request');
    card.classList.remove('leave-request-pending');
    card.classList.add('leave-request-rejected');
    const badge = card.querySelector('.leave-request-status-badge');
    badge.className = 'leave-request-status-badge leave-request-status-badge-rejected';
    badge.innerHTML = '<span class="leave-request-status-dot"></span> Rejected';
  });
});

Approved & Rejected States

Preview

James Rivera

Senior Engineer

ERPlora — Engineering

Approved

Personal

From Apr 1 Tuesday

To Apr 2 Wednesday

2 business days

Sara Kim

Marketing Lead

ERPlora — Marketing

Rejected

Vacation

From Mar 24 Monday

To Apr 4 Friday

10 business days

Rejection Note

Conflicts with the Q1 product launch. Please reschedule to after April 7.

<div style="display:flex;flex-wrap:wrap;gap:1.5rem;">
  <!-- Approved -->
  <div class="leave-request leave-request-approved">
    <div class="leave-request-header">
      <div class="leave-request-avatar">
        <div style="width:40px;height:40px;border-radius:50%;background:var(--color-neutral);color:var(--color-neutral-content);display:flex;align-items:center;justify-content:center;font-weight:600;">JR</div>
      </div>
      <div class="leave-request-employee">
        <p class="leave-request-name">James Rivera</p>
        <p class="leave-request-role">Senior Engineer</p>
        <p class="leave-request-department">ERPlora &mdash; Engineering</p>
      </div>
      <div class="leave-request-status">
        <span class="leave-request-status-badge leave-request-status-badge-approved">
          <span class="leave-request-status-dot"></span>
          Approved
        </span>
      </div>
    </div>
    <div class="leave-request-body">
      <span class="leave-request-type leave-request-type-personal">Personal</span>
      <div class="leave-request-dates" style="margin-top:1rem;">
        <div class="leave-request-date">
          <span class="leave-request-date-label">From</span>
          <span class="leave-request-date-value">Apr 1</span>
          <span class="leave-request-date-day">Tuesday</span>
        </div>
        <div class="leave-request-dates-arrow">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </div>
        <div class="leave-request-date">
          <span class="leave-request-date-label">To</span>
          <span class="leave-request-date-value">Apr 2</span>
          <span class="leave-request-date-day">Wednesday</span>
        </div>
      </div>
      <div class="leave-request-duration">
        <span class="leave-request-duration-value">2</span>
        <span class="leave-request-duration-label">business days</span>
      </div>
    </div>
    <div class="leave-request-actions">
      <button class="leave-request-action leave-request-action-secondary">View Details</button>
    </div>
  </div>

  <!-- Rejected -->
  <div class="leave-request leave-request-rejected">
    <div class="leave-request-header">
      <div class="leave-request-avatar">
        <div style="width:40px;height:40px;border-radius:50%;background:var(--color-neutral);color:var(--color-neutral-content);display:flex;align-items:center;justify-content:center;font-weight:600;">SK</div>
      </div>
      <div class="leave-request-employee">
        <p class="leave-request-name">Sara Kim</p>
        <p class="leave-request-role">Marketing Lead</p>
        <p class="leave-request-department">ERPlora &mdash; Marketing</p>
      </div>
      <div class="leave-request-status">
        <span class="leave-request-status-badge leave-request-status-badge-rejected">
          <span class="leave-request-status-dot"></span>
          Rejected
        </span>
      </div>
    </div>
    <div class="leave-request-body">
      <span class="leave-request-type leave-request-type-vacation">Vacation</span>
      <div class="leave-request-dates" style="margin-top:1rem;">
        <div class="leave-request-date">
          <span class="leave-request-date-label">From</span>
          <span class="leave-request-date-value">Mar 24</span>
          <span class="leave-request-date-day">Monday</span>
        </div>
        <div class="leave-request-dates-arrow">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </div>
        <div class="leave-request-date">
          <span class="leave-request-date-label">To</span>
          <span class="leave-request-date-value">Apr 4</span>
          <span class="leave-request-date-day">Friday</span>
        </div>
      </div>
      <div class="leave-request-duration">
        <span class="leave-request-duration-value">10</span>
        <span class="leave-request-duration-label">business days</span>
      </div>
      <div class="leave-request-reason">
        <span class="leave-request-reason-label">Rejection Note</span>
        <p class="leave-request-reason-text">Conflicts with the Q1 product launch. Please reschedule to after April 7.</p>
      </div>
    </div>
    <div class="leave-request-actions">
      <button class="leave-request-action leave-request-action-secondary">View Details</button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-6">
  <!-- Approved card with green left bar -->
  <div class="relative flex flex-col w-full max-w-md overflow-hidden bg-base-100 rounded-box shadow-sm">
    <div class="absolute top-0 left-0 w-1 h-full bg-success rounded-l-box"></div>
    <div class="flex items-start gap-4 p-6 pb-4">
      <div class="w-10 h-10 rounded-full bg-neutral text-neutral-content flex items-center justify-center font-semibold shrink-0">JR</div>
      <div class="flex-1 min-w-0">
        <p class="font-semibold text-lg m-0">James Rivera</p>
        <p class="text-sm text-base-content/60 mt-1 mb-0">Senior Engineer</p>
      </div>
      <span class="inline-flex items-center gap-1 px-2 py-1 text-xs font-semibold rounded-full bg-success/15 text-success">
        <span class="w-1.5 h-1.5 rounded-full bg-current"></span> Approved
      </span>
    </div>
    <div class="px-6 pb-4">
      <span class="inline-flex px-2 py-1 text-xs font-semibold uppercase tracking-wide rounded bg-purple-500/12 text-purple-600">Personal</span>
    </div>
    <div class="px-6 py-4 border-t border-base-200">
      <button class="w-full h-9 px-4 text-sm font-semibold bg-base-100 text-base-content/60 border border-base-300 rounded-lg">View Details</button>
    </div>
  </div>

  <!-- Rejected card with red left bar -->
  <div class="relative flex flex-col w-full max-w-md overflow-hidden bg-base-100 rounded-box shadow-sm">
    <div class="absolute top-0 left-0 w-1 h-full bg-error rounded-l-box"></div>
    <div class="flex items-start gap-4 p-6 pb-4">
      <div class="w-10 h-10 rounded-full bg-neutral text-neutral-content flex items-center justify-center font-semibold shrink-0">SK</div>
      <div class="flex-1 min-w-0">
        <p class="font-semibold text-lg m-0">Sara Kim</p>
        <p class="text-sm text-base-content/60 mt-1 mb-0">Marketing Lead</p>
      </div>
      <span class="inline-flex items-center gap-1 px-2 py-1 text-xs font-semibold rounded-full bg-error/15 text-error">
        <span class="w-1.5 h-1.5 rounded-full bg-current"></span> Rejected
      </span>
    </div>
    <div class="px-6 pb-4">
      <span class="inline-flex px-2 py-1 text-xs font-semibold uppercase tracking-wide rounded bg-blue-500/12 text-blue-600">Vacation</span>
    </div>
    <div class="px-6 py-4 border-t border-base-200">
      <button class="w-full h-9 px-4 text-sm font-semibold bg-base-100 text-base-content/60 border border-base-300 rounded-lg">View Details</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// Toggle status programmatically
function setLeaveStatus(cardEl, status) {
  // status: 'pending' | 'approved' | 'rejected' | 'cancelled'
  cardEl.classList.remove(
    'leave-request-pending', 'leave-request-approved',
    'leave-request-rejected', 'leave-request-cancelled'
  );
  cardEl.classList.add('leave-request-' + status);

  const badge = cardEl.querySelector('.leave-request-status-badge');
  badge.className = 'leave-request-status-badge leave-request-status-badge-' + status;
  badge.innerHTML =
    '<span class="leave-request-status-dot"></span> ' +
    status.charAt(0).toUpperCase() + status.slice(1);
}

Request Form with Type Selector

Preview

New Leave Request

Submit a new time-off request at ERPlora

Vacation balance 14 days

Leave Type

Vacation Sick Personal WFH

Start Date

End Date

Reason (optional)

<div class="leave-request-form">
  <h3 class="leave-request-form-title">New Leave Request</h3>
  <p class="leave-request-form-subtitle">Submit a new time-off request at ERPlora</p>

  <div class="leave-request-form-balance">
    <span class="leave-request-form-balance-label">Vacation balance</span>
    <span class="leave-request-form-balance-value">14 days</span>
  </div>

  <div class="leave-request-form-field">
    <label class="leave-request-form-label leave-request-form-label-required">Leave Type</label>
    <div class="leave-request-form-types">
      <label class="leave-request-form-type-option leave-request-form-type-option-selected">
        <input type="radio" name="leave-type" value="vacation" checked>
        <span class="leave-request-form-type-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
        </span>
        <span class="leave-request-form-type-name">Vacation</span>
      </label>
      <label class="leave-request-form-type-option">
        <input type="radio" name="leave-type" value="sick">
        <span class="leave-request-form-type-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
        </span>
        <span class="leave-request-form-type-name">Sick</span>
      </label>
      <label class="leave-request-form-type-option">
        <input type="radio" name="leave-type" value="personal">
        <span class="leave-request-form-type-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </span>
        <span class="leave-request-form-type-name">Personal</span>
      </label>
      <label class="leave-request-form-type-option">
        <input type="radio" name="leave-type" value="wfh">
        <span class="leave-request-form-type-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        </span>
        <span class="leave-request-form-type-name">WFH</span>
      </label>
    </div>
  </div>

  <div class="leave-request-form-row">
    <div class="leave-request-form-field">
      <label class="leave-request-form-label leave-request-form-label-required">Start Date</label>
      <input type="date" style="height:2.5rem;padding:0 0.75rem;border:1px solid var(--color-base-300);border-radius:var(--radius-field,0.5rem);font-size:0.875rem;background:var(--color-base-100);color:var(--color-base-content);">
    </div>
    <div class="leave-request-form-field">
      <label class="leave-request-form-label leave-request-form-label-required">End Date</label>
      <input type="date" style="height:2.5rem;padding:0 0.75rem;border:1px solid var(--color-base-300);border-radius:var(--radius-field,0.5rem);font-size:0.875rem;background:var(--color-base-100);color:var(--color-base-content);">
    </div>
  </div>

  <div class="leave-request-form-field">
    <label class="leave-request-form-label">Reason (optional)</label>
    <textarea rows="3" placeholder="Add a note for your manager..." style="padding:0.75rem;border:1px solid var(--color-base-300);border-radius:var(--radius-field,0.5rem);font-size:0.875rem;background:var(--color-base-100);color:var(--color-base-content);resize:vertical;"></textarea>
  </div>

  <div class="leave-request-form-actions">
    <button class="leave-request-action leave-request-action-secondary">Cancel</button>
    <button class="leave-request-action leave-request-action-approve">Submit Request</button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4 p-6 bg-base-100 rounded-box shadow-sm max-w-lg">
  <h3 class="font-semibold text-xl m-0">New Leave Request</h3>
  <p class="text-sm text-base-content/60 mb-2">Submit a new time-off request at ERPlora</p>

  <div class="flex justify-between items-center p-4 bg-base-200 rounded-lg">
    <span class="text-sm text-base-content/60">Vacation balance</span>
    <span class="font-semibold text-lg text-primary">14 days</span>
  </div>

  <div class="flex flex-col gap-1">
    <label class="text-sm font-medium text-base-content/60">Leave Type <span class="text-error">*</span></label>
    <div class="grid grid-cols-4 gap-2">
      <label class="flex flex-col items-center gap-1 p-4 bg-primary/8 border-2 border-primary rounded-lg cursor-pointer">
        <svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
        <span class="text-xs font-medium">Vacation</span>
      </label>
      <label class="flex flex-col items-center gap-1 p-4 bg-base-200 border-2 border-transparent rounded-lg cursor-pointer hover:bg-base-300">
        <svg class="w-6 h-6 text-base-content/60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
        <span class="text-xs font-medium">Sick</span>
      </label>
      <label class="flex flex-col items-center gap-1 p-4 bg-base-200 border-2 border-transparent rounded-lg cursor-pointer hover:bg-base-300">
        <svg class="w-6 h-6 text-base-content/60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span class="text-xs font-medium">Personal</span>
      </label>
      <label class="flex flex-col items-center gap-1 p-4 bg-base-200 border-2 border-transparent rounded-lg cursor-pointer hover:bg-base-300">
        <svg class="w-6 h-6 text-base-content/60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        <span class="text-xs font-medium">WFH</span>
      </label>
    </div>
  </div>

  <div class="flex gap-4">
    <div class="flex-1 flex flex-col gap-1">
      <label class="text-sm font-medium text-base-content/60">Start Date <span class="text-error">*</span></label>
      <input type="date" class="h-10 px-3 border border-base-300 rounded-lg text-sm bg-base-100">
    </div>
    <div class="flex-1 flex flex-col gap-1">
      <label class="text-sm font-medium text-base-content/60">End Date <span class="text-error">*</span></label>
      <input type="date" class="h-10 px-3 border border-base-300 rounded-lg text-sm bg-base-100">
    </div>
  </div>

  <div class="flex flex-col gap-1">
    <label class="text-sm font-medium text-base-content/60">Reason (optional)</label>
    <textarea rows="3" placeholder="Add a note for your manager..." class="p-3 border border-base-300 rounded-lg text-sm bg-base-100 resize-y"></textarea>
  </div>

  <div class="flex gap-2 mt-4 pt-4 border-t border-base-300">
    <button class="flex-1 h-9 px-4 text-sm font-semibold bg-base-100 text-base-content/60 border border-base-300 rounded-lg">Cancel</button>
    <button class="flex-1 h-9 px-4 text-sm font-semibold bg-success text-success-content rounded-lg">Submit Request</button>
  </div>
</div>

Requires: tw.min.css

// Leave type selector toggle
document.querySelectorAll('.leave-request-form-type-option').forEach(option => {
  option.addEventListener('click', () => {
    const form = option.closest('.leave-request-form');
    form.querySelectorAll('.leave-request-form-type-option').forEach(o =>
      o.classList.remove('leave-request-form-type-option-selected')
    );
    option.classList.add('leave-request-form-type-option-selected');
  });
});

// Form submission
document.querySelector('.leave-request-form')?.addEventListener('submit', e => {
  e.preventDefault();
  const data = new FormData(e.target);
  console.log('Leave request submitted:', Object.fromEntries(data));
});

Classes Reference

Class	Description
`.leave-request`	Base card container with left status bar
`.leave-request-pending`	Yellow/warning status indicator
`.leave-request-approved`	Green/success status indicator
`.leave-request-rejected`	Red/error status indicator
`.leave-request-cancelled`	Gray status with reduced opacity
`.leave-request-compact`	Compact variant with less padding
`.leave-request.glass`	Glass morphism variant
`.leave-request-header`	Top section with avatar, name, and status badge
`.leave-request-avatar`	Employee avatar wrapper
`.leave-request-employee`	Employee info wrapper (name, role, dept)
`.leave-request-name`	Employee name text
`.leave-request-role`	Employee role/title text
`.leave-request-department`	Department text
`.leave-request-status-badge`	Status pill badge (pending, approved, rejected, cancelled)
`.leave-request-status-dot`	Animated dot inside status badge
`.leave-request-type`	Leave type badge (base style)
`.leave-request-type-vacation`	Blue vacation type badge
`.leave-request-type-sick`	Red sick type badge
`.leave-request-type-personal`	Purple personal type badge
`.leave-request-type-wfh`	Green work-from-home type badge
`.leave-request-body`	Main body content area
`.leave-request-dates`	Date range row with from/to columns
`.leave-request-date`	Single date column (from or to)
`.leave-request-dates-arrow`	Arrow icon between dates
`.leave-request-duration`	Duration display bar
`.leave-request-reason`	Reason/notes block with left border
`.leave-request-meta`	Meta info row (submitted date, etc.)
`.leave-request-actions`	Action buttons row at bottom
`.leave-request-action`	Base action button
`.leave-request-action-approve`	Green approve button
`.leave-request-action-reject`	Red reject button
`.leave-request-action-secondary`	Gray secondary button
`.leave-request-form`	Request form container
`.leave-request-form-title`	Form heading
`.leave-request-form-types`	Leave type selector grid
`.leave-request-form-type-option`	Individual type option card
`.leave-request-form-type-option-selected`	Selected type option highlight
`.leave-request-form-balance`	Leave balance display row
`.leave-request-form-row`	Horizontal field row (e.g., start/end date)
`.leave-request-form-field`	Form field wrapper
`.leave-request-form-label`	Field label
`.leave-request-form-label-required`	Adds red asterisk after label
`.leave-request-form-actions`	Form action buttons row