/* HENDAR UALL-Y — explicit close SVGs plus the UALL-X unified HR profile. */

/*
 * The icon is real DOM with an explicit currentColor stroke.  These rules are
 * intentionally appearance-only: every component keeps its original display,
 * position, dimensions and layout ownership.
 */
.hendar-explicit-x-control {
  color: var(--company-primary,#0b3452) !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-appearance: none;
  appearance: none;
}

.hendar-close-control {
  border-color: color-mix(in srgb,var(--company-primary,#0b3452) 65%,#fff) !important;
  background-color: #fff !important;
}

.hendar-remove-control {
  color: #9f1d2e !important;
}

.hendar-explicit-x-control > .hendar-explicit-x-icon {
  display: block;
  inline-size: 18px;
  block-size: 18px;
  max-inline-size: 100%;
  max-block-size: 100%;
  overflow: visible;
  color: inherit !important;
  pointer-events: none;
}

.hendar-explicit-x-control > .hendar-explicit-x-icon path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;
}

.hendar-explicit-x-control::before,
.hendar-explicit-x-control::after {
  content: none !important;
}

.hendar-close-control:hover {
  color: #082a45 !important;
  background-color: #eef5f8 !important;
  border-color: #0b3452 !important;
}

.hendar-explicit-x-control:focus-visible {
  outline: 3px solid color-mix(in srgb,var(--company-primary,#0b3452) 35%,transparent) !important;
  outline-offset: 3px !important;
}

/* One employee file: identity, employment, pay, attendance and governance. */
#employeeProfileModal { width:min(1120px,96vw); }
#employeeProfileModal .modal-header { position:sticky;top:0;z-index:12; }
#employeeProfileContent { padding:18px; }
.hr-unified-profile { display:grid;gap:15px; }
.hr-unified-hero {
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:17px;
  padding:18px;border:1px solid color-mix(in srgb,var(--company-primary,#0b3452) 16%,var(--border-color,#d8e0e8));
  border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--company-primary,#0b3452) 7%,#fff),#fff);
}
.hr-unified-avatar { width:76px;height:76px;border-radius:18px;overflow:hidden;display:grid;place-items:center;background:#dfecef;color:var(--company-primary,#0b3452);font-size:31px;font-weight:900;box-shadow:inset 0 0 0 1px rgba(11,52,82,.12); }
.hr-unified-avatar img { width:100%;height:100%;object-fit:cover;object-position:50% 20%; }
.hr-unified-identity { min-width:0; }
.hr-unified-identity .eyebrow { color:var(--company-primary,#0b3452); }
.hr-unified-identity h3 { margin:4px 0 2px;color:var(--text,#142033);font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.25;overflow-wrap:anywhere; }
.hr-unified-identity p { margin:0;color:var(--muted,#667085);line-height:1.6; }
.hr-unified-badges { display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:9px; }
.hr-unified-badges span { padding:5px 9px;border-radius:999px;background:#eef4f7;color:#29465a;font-size:.77rem;font-weight:800; }
.hr-unified-badges .active { background:#e8f7ee;color:#166534; }
.hr-unified-badges .ended { background:#fff1f2;color:#9f1239; }
.hr-unified-actions { display:flex;justify-content:flex-end;align-items:center;gap:7px;flex-wrap:wrap;max-width:310px; }
.hr-unified-actions .button { min-height:38px;padding:8px 11px;white-space:nowrap; }

.hr-unified-metrics { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px; }
.hr-unified-metric { min-width:0;padding:12px 13px;border:1px solid var(--border-color,#d8e0e8);border-radius:13px;background:var(--surface,#fff); }
.hr-unified-metric span,.hr-unified-metric strong { display:block; }
.hr-unified-metric span { color:var(--muted,#667085);font-size:.73rem; }
.hr-unified-metric strong { margin-top:4px;color:var(--text,#142033);font-size:.95rem;overflow-wrap:anywhere; }

.hr-unified-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.hr-unified-section { min-width:0;padding:15px;border:1px solid var(--border-color,#d8e0e8);border-radius:15px;background:var(--surface,#fff); }
.hr-unified-section.wide { grid-column:1/-1; }
.hr-unified-section h4 { margin:0 0 11px;color:var(--company-primary,#0b3452);font-size:1rem; }
.hr-unified-section dl { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin:0; }
.hr-unified-section dl>div { min-width:0;padding-bottom:8px;border-bottom:1px dashed color-mix(in srgb,var(--border-color,#d8e0e8) 72%,transparent); }
.hr-unified-section dt { color:var(--muted,#667085);font-size:.73rem; }
.hr-unified-section dd { margin:3px 0 0;color:var(--text,#142033);font-weight:780;overflow-wrap:anywhere; }
.hr-unified-section table { width:100%;min-width:680px; }
.hr-unified-table { max-height:310px;overflow:auto;border:1px solid var(--border-color,#d8e0e8);border-radius:11px;scrollbar-gutter:stable; }
.hr-unified-table thead { position:sticky;top:0;z-index:2; }
.hr-unified-empty { margin:0;padding:16px;text-align:center;color:var(--muted,#667085);background:var(--surface-soft,#f7f9fc);border-radius:11px; }
.hr-unified-restricted { display:grid;place-items:center;min-height:96px;padding:14px;border:1px dashed #f1b77a;border-radius:12px;background:#fff8ef;color:#92400e;text-align:center; }
.hr-unified-restricted small { display:block;margin-top:4px;font-family:monospace; }
.hr-unified-note { padding:11px 13px;border-radius:12px;background:#eff6ff;color:#1e3a5f;line-height:1.65; }

@media (max-width:840px) {
  #employeeProfileContent { padding:12px; }
  .hr-unified-hero { grid-template-columns:auto minmax(0,1fr);align-items:start; }
  .hr-unified-actions { grid-column:1/-1;max-width:none;justify-content:stretch; }
  .hr-unified-actions .button { flex:1; }
  .hr-unified-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hr-unified-grid { grid-template-columns:1fr; }
  .hr-unified-section.wide { grid-column:auto; }
}

@media (max-width:560px) {
  #employeeProfileModal { width:100vw;max-height:100dvh; }
  .hr-unified-hero { grid-template-columns:1fr;text-align:center;justify-items:center; }
  .hr-unified-avatar { width:88px;height:88px; }
  .hr-unified-badges,.hr-unified-actions { justify-content:center; }
  .hr-unified-metrics { grid-template-columns:1fr 1fr; }
  .hr-unified-section dl { grid-template-columns:1fr; }
}