/* MMD Portal — HR master-data / leave / OMS / sales-pipeline module.
   Owns: UnifiedUploadIngestModal.tsx, EmployeeBrowseTab.tsx, LeaveList.tsx,
   FerriOms3Surface.tsx, PipelineCardPopups.tsx.
   All classes here must appear in design-system.manifest.json.

   Colour policy: every value below is byte-identical to the inline style it
   replaces. Where an existing CDS token (portal-core.css root, or the
   generated --ds-c-* derived-palette block) already carries that exact hex,
   this file references it via var() instead of repeating the literal. Only
   four colours had no existing token (the dark-modal gradient's lightest
   blue stop, and the three "document processed" success-banner greens) —
   those are declared once below and reused everywhere. */
:root {
  --hrp-c-blue-light: #60a5fa;     /* upload-progress gradient, 3rd stop */
  --hrp-c-success-bg: #14532d;     /* "document processed" banner background */
  --hrp-c-success-border: #22c55e; /* "document processed" banner border */
  --hrp-c-success-badge: #166534;  /* "document processed" doc-type chip */
}

/* ===================================================================
   UnifiedUploadIngestModal.tsx
   =================================================================== */
.hrp-upload-backdrop { z-index: 10050; }
.hrp-upload-dialog { width: 90vw; max-width: 800px; }

/* Shared icon+label row (modal title icon, success-banner icon) */
.hrp-icon-label-row { display: flex; align-items: center; gap: 0.5rem; }

.hrp-upload-body { gap: 1.25rem; }
.hrp-upload-search-col { display: flex; flex-direction: column; gap: 0.5rem; }

.hrp-upload-emp-list {
  max-height: 150px; overflow-y: auto;
  border: 1px solid var(--ds-c-blue-16); border-radius: 6px;
  background: var(--ds-c-neutral-25);
}
.hrp-upload-emp-item {
  padding: 0.5rem 0.75rem; cursor: pointer;
  border-bottom: 1px solid var(--ds-c-neutral-20);
  font-size: 0.85rem; color: var(--ds-c-red-18);
}
.hrp-upload-emp-item-sub { color: var(--ds-c-neutral-05); }

/* Drop zone: fully overrides the light-themed .emp-upload-drop base for
   this dark modal context. dragOver toggles --active instead of an
   inline background (binary state, not a continuous value). */
.hrp-upload-drop {
  padding: 2.5rem 1.5rem; border: 2px dashed var(--ds-c-blue-16);
  border-radius: 8px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  background: transparent;
}
.hrp-upload-drop--active { background: var(--ds-c-neutral-20); }
.hrp-upload-drop-title { font-size: 1rem; color: var(--ds-c-red-18); }
.hrp-upload-drop-or { font-size: 0.8rem; color: var(--ds-c-neutral-05); }
/* The drop-zone glyph was an inline SVG with its stroke colour written into the
   markup. It now inherits, so the colour lives here with everything else. */
.hrp-upload-drop-icon { width: 40px; height: 40px; color: var(--ds-c-neutral-05); }

.hrp-upload-analyzing {
  padding: 2rem 1rem; display: flex; flex-direction: column;
  align-items: center; gap: 1.25rem; text-align: center;
}
.hrp-upload-analyzing-title { font-size: 1.1rem; font-weight: 600; color: var(--ds-c-white-01); }

.hrp-progress-track {
  width: 100%; height: 14px; background: var(--ds-c-neutral-20);
  border-radius: 7px; overflow: hidden; position: relative;
  box-shadow: var(--shadow-progress-inset);
}
/* Fill width is a genuinely continuous runtime value (upload %). The
   component only ever advances progress in multiples of 5 (0,5,...,30,
   then explicit 35/75/100), so a 5%-step modifier ladder reproduces the
   exact value every time, never an approximation. */
.hrp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ds-c-blue-18), var(--ds-c-neutral-16), var(--hrp-c-blue-light));
  border-radius: 7px; transition: width 0.3s ease-in-out;
  box-shadow: var(--shadow-progress-glow);
}
.hrp-progress-fill--p0 { width: 0%; }
.hrp-progress-fill--p5 { width: 5%; }
.hrp-progress-fill--p10 { width: 10%; }
.hrp-progress-fill--p15 { width: 15%; }
.hrp-progress-fill--p20 { width: 20%; }
.hrp-progress-fill--p25 { width: 25%; }
.hrp-progress-fill--p30 { width: 30%; }
.hrp-progress-fill--p35 { width: 35%; }
.hrp-progress-fill--p40 { width: 40%; }
.hrp-progress-fill--p45 { width: 45%; }
.hrp-progress-fill--p50 { width: 50%; }
.hrp-progress-fill--p55 { width: 55%; }
.hrp-progress-fill--p60 { width: 60%; }
.hrp-progress-fill--p65 { width: 65%; }
.hrp-progress-fill--p70 { width: 70%; }
.hrp-progress-fill--p75 { width: 75%; }
.hrp-progress-fill--p80 { width: 80%; }
.hrp-progress-fill--p85 { width: 85%; }
.hrp-progress-fill--p90 { width: 90%; }
.hrp-progress-fill--p95 { width: 95%; }
.hrp-progress-fill--p100 { width: 100%; }

.hrp-progress-meta-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.hrp-progress-label { font-size: 0.85rem; color: var(--ds-c-neutral-05); }
.hrp-progress-pct { font-size: 0.9rem; font-weight: 700; color: var(--ds-c-neutral-16); }

.hrp-upload-complete { display: flex; flex-direction: column; gap: 1rem; }
.hrp-upload-success-banner {
  background: var(--hrp-c-success-bg); border: 1px solid var(--hrp-c-success-border);
  color: var(--ds-c-blue-01); padding: 0.75rem 1rem; border-radius: 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.hrp-upload-doctype-badge {
  background: var(--hrp-c-success-badge); padding: 0.2rem 0.5rem;
  border-radius: var(--ds-radius-sm); font-size: 0.8rem; font-weight: 600;
}
.hrp-upload-file-info {
  background: var(--ds-c-neutral-25); padding: 1rem; border-radius: 6px;
  display: flex; flex-direction: column; gap: 0.5rem;
  font-size: 0.85rem; color: var(--ds-c-red-18);
}
.hrp-upload-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 0.5rem; }

/* ===================================================================
   EmployeeBrowseTab.tsx
   =================================================================== */
.emp-browse-people-head {
  margin: 1rem 0 0.5rem 0; display: flex; align-items: center; justify-content: space-between;
}
.hrp-people-heading {
  margin: 0; font-size: 1.1rem; font-weight: 700;
  font-family: var(--font-serif, Georgia, serif);
}

/* ===================================================================
   FerriOms3Surface.tsx
   =================================================================== */
.ds-pt-stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 12px 0; }
.ds-invoice-stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 14px 0; }
.hrp-empty-cell { grid-column: 1 / -1; padding: 16px 0; }

/* ===================================================================
   PipelineCardPopups.tsx
   =================================================================== */
.hrp-tag-ml6 { margin-left: 6px; }