/* ============================================================================================================================
   HR 360 design system (Round 6) -- ONE layer for every HR 360 surface (admin profile, ESS, public completion form, HR navigation).
   Built on ds/tokens.css (brand, neutrals, status, spacing, radius, type, motion, light/dark) -- no new palette, no competing button
   or card system. Every component is prefixed .hx- so it never collides with the legacy v7..v16 layers it replaces on these surfaces.

   Direction: formal, calm, premium. Separation by surface tone and space, not by borders; one ink "identity band" per page is the only
   bold element; amber is reserved for "needs your attention"; type sizes never below 13px; RTL first (logical properties only).
   ============================================================================================================================ */
:root{
  --hx-ink:#0a2748;               /* identity band (light theme) */
  --hx-ink-2:#0f3460;
  --hx-on-ink:#ffffff;
  --hx-on-ink-muted:rgba(255,255,255,.74);
  --hx-line:color-mix(in srgb, var(--text-primary) 8%, transparent);
  --hx-tint:color-mix(in srgb, var(--brand-primary) 7%, var(--surface-1));
  --hx-radius:16px;
  --hx-gap:20px;
  --hx-ring-track:rgba(255,255,255,.18);
}
:root[data-theme="dark"]{
  --hx-ink:#0e2a4c; --hx-ink-2:#13355d; --hx-line:rgba(255,255,255,.08);
  --hx-tint:color-mix(in srgb, var(--brand-primary) 14%, var(--surface-1));
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --hx-ink:#0e2a4c; --hx-ink-2:#13355d; --hx-line:rgba(255,255,255,.08); --hx-tint:color-mix(in srgb, var(--brand-primary) 14%, var(--surface-1)); } }

/* ---------- page frame ---------- */
.hx-page{ display:flex; flex-direction:column; gap:var(--hx-gap); font-family:var(--font-ui); color:var(--text-primary); min-width:0; }
.hx-crumbs{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); }
.hx-crumbs button{ all:unset; cursor:pointer; color:var(--brand-primary); font-weight:600; }
.hx-crumbs button:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:6px; }

/* ---------- buttons (thin layer over the shared ds-btn look; consistent sizes) ---------- */
.hx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 18px; border-radius:12px; border:1px solid transparent;
  font:600 14px/1 var(--font-ui); cursor:pointer; white-space:nowrap; transition:background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast); }
.hx-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.hx-btn[disabled]{ opacity:.55; cursor:not-allowed; }
.hx-btn-primary{ background:var(--brand-primary-strong); color:#fff; }
.hx-btn-primary:hover{ background:color-mix(in srgb, var(--brand-primary-strong) 88%, #000); }
.hx-btn-quiet{ background:var(--surface-2); color:var(--text-primary); border-color:var(--hx-line); }
.hx-btn-quiet:hover{ background:var(--surface-sunken); }
.hx-btn-danger{ background:transparent; color:var(--status-critical); border-color:color-mix(in srgb, var(--status-critical) 35%, transparent); }
.hx-btn-sm{ min-height:34px; padding:0 12px; font-size:13px; border-radius:10px; }
.hx-btn svg{ width:18px; height:18px; flex:none; }
.hx-iconbtn{ inline-size:42px; padding:0; }

/* ---------- menu (overflow actions) ---------- */
.hx-menu{ position:relative; }
.hx-menu-list{ position:absolute; inset-inline-end:0; top:calc(100% + 8px); min-width:220px; z-index:40; padding:6px; border-radius:14px; background:var(--surface-raised);
  box-shadow:var(--shadow-lg); border:1px solid var(--hx-line); display:none; }
.hx-menu[data-open="1"] .hx-menu-list{ display:block; }
.hx-menu-list button{ all:unset; box-sizing:border-box; display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border-radius:10px; font:500 14px/1.3 var(--font-ui); color:var(--text-primary); cursor:pointer; }
.hx-menu-list button:hover, .hx-menu-list button:focus-visible{ background:var(--surface-2); }
.hx-menu-list .hx-sep{ height:1px; background:var(--hx-line); margin:6px 4px; }
.hx-menu-list .is-danger{ color:var(--status-critical); }

/* ---------- identity band (the one bold element) ---------- */
.hx-hero{ position:relative; border-radius:22px; color:var(--hx-on-ink); background:
  radial-gradient(120% 140% at 100% 0%, var(--hx-ink-2) 0%, transparent 55%), linear-gradient(180deg, var(--hx-ink), var(--hx-ink)); overflow:hidden; }
.hx-hero::after{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background:var(--brand-gradient); opacity:.9; }
.hx-hero-main{ display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding:28px 28px 22px; }
.hx-avatar{ inline-size:96px; block-size:96px; border-radius:24px; overflow:hidden; background:rgba(255,255,255,.1); display:grid; place-items:center;
  font:700 30px/1 var(--font-ui); color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.16); position:relative; }
.hx-avatar img{ inline-size:100%; block-size:100%; object-fit:cover; }
.hx-avatar .large-avatar, .hx-avatar .v16-emp-avatar{ all:unset; inline-size:100%; block-size:100%; display:grid; place-items:center; position:relative; }
.hx-avatar label{ position:absolute; inset:auto 6px 6px auto; }
.hx-hero h1{ margin:0; font:700 26px/1.3 var(--font-ui); letter-spacing:0; color:#fff; }
.hx-hero .hx-sub{ margin:6px 0 0; font:500 15px/1.5 var(--font-ui); color:var(--hx-on-ink-muted); }
.hx-hero .hx-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.hx-hero-chip{ display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font:600 13px/1 var(--font-ui); }
.hx-hero-chip i{ inline-size:8px; block-size:8px; border-radius:50%; background:currentColor; }
.hx-hero-chip.is-good i{ background:#3ad29f; } .hx-hero-chip.is-warn i{ background:var(--brand-amber); } .hx-hero-chip.is-bad i{ background:#ff7a7a; }
.hx-hero-side{ display:flex; flex-direction:column; align-items:flex-end; gap:16px; }
.hx-hero-actions{ display:flex; gap:10px; }
.hx-hero .hx-btn-primary{ background:#fff; color:var(--hx-ink); }
.hx-hero .hx-btn-primary:hover{ background:#eef4fb; }
.hx-hero .hx-btn-quiet{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.18); }
.hx-hero .hx-btn-quiet:hover{ background:rgba(255,255,255,.16); }
.hx-completion{ display:flex; align-items:center; gap:12px; text-align:end; }
.hx-completion small{ display:block; font:500 13px/1.4 var(--font-ui); color:var(--hx-on-ink-muted); }
.hx-completion b{ font:700 15px/1.3 var(--font-ui); color:#fff; }
.hx-ring{ --p:0; inline-size:52px; block-size:52px; border-radius:50%; flex:none;
  background:conic-gradient(var(--brand-teal) calc(var(--p) * 1%), var(--hx-ring-track) 0); display:grid; place-items:center; }
.hx-ring span{ inline-size:40px; block-size:40px; border-radius:50%; background:var(--hx-ink); display:grid; place-items:center; font:700 13px/1 var(--font-ui); color:#fff; }
.hx-facts{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:0; border-top:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.12); }
.hx-fact{ padding:14px 20px; min-width:0; }
.hx-fact + .hx-fact{ border-inline-start:1px solid rgba(255,255,255,.08); }
.hx-fact small{ display:block; font:500 13px/1.4 var(--font-ui); color:var(--hx-on-ink-muted); }
.hx-fact b{ display:block; margin-top:4px; font:600 15px/1.4 var(--font-ui); color:#fff; overflow-wrap:anywhere; }
.hx-fact b.is-ltr{ direction:ltr; unicode-bidi:isolate; text-align:end; }
.hx-fact b.is-warn{ color:#ffd38a; }

/* ---------- group navigation (8 groups) + sub navigation ---------- */
.hx-groups{ position:sticky; top:var(--hx-sticky-top, 0px); z-index:5; display:flex; gap:4px; padding:6px; border-radius:16px; background:var(--surface-1);
  box-shadow:var(--shadow-sm); border:1px solid var(--hx-line); }
.hx-group{ all:unset; box-sizing:border-box; flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 10px;
  border-radius:12px; font:600 14px/1.25 var(--font-ui); color:var(--text-secondary); cursor:pointer; text-align:center; }
.hx-group svg{ inline-size:18px; block-size:18px; flex:none; opacity:.85; }
.hx-group:hover{ background:var(--surface-2); color:var(--text-primary); }
.hx-group:focus-visible{ box-shadow:var(--focus-ring); }
.hx-group[aria-selected="true"]{ background:var(--hx-tint); color:var(--brand-primary-strong); }
:root[data-theme="dark"] .hx-group[aria-selected="true"]{ color:#cfe5ff; }
.hx-group .hx-count{ min-width:20px; padding:2px 6px; border-radius:999px; background:var(--brand-accent-soft); color:var(--text-on-amber); font:700 12px/1 var(--font-ui); }
.hx-sub{ display:flex; flex-wrap:wrap; gap:8px; }
.hx-subtab{ all:unset; box-sizing:border-box; min-height:36px; padding:0 14px; border-radius:999px; display:inline-flex; align-items:center; gap:6px;
  font:600 13.5px/1 var(--font-ui); color:var(--text-secondary); cursor:pointer; background:transparent; border:1px solid var(--hx-line); }
.hx-subtab:hover{ color:var(--text-primary); background:var(--surface-2); }
.hx-subtab:focus-visible{ box-shadow:var(--focus-ring); }
.hx-subtab[aria-selected="true"]{ background:var(--text-primary); color:var(--surface-1); border-color:transparent; }
.hx-panel{ min-width:0; }
.hx-panel-title{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 2px; }
.hx-panel-title h2{ margin:0; font:700 19px/1.35 var(--font-ui); }
.hx-panel-title p{ margin:0; font:500 13.5px/1.5 var(--font-ui); color:var(--text-muted); }

/* legacy tab content rendered inside a redesigned frame: quieter cards, consistent radius, no heavy borders */
.hx-legacy .ds-card, .hx-legacy .card{ border-radius:var(--hx-radius) !important; border-color:var(--hx-line) !important; box-shadow:none !important; }
.hx-legacy .card-title h4{ font-size:16px; }
.hx-legacy .profile-tabs{ display:none !important; }

/* ---------- sections, field lists ---------- */
.hx-section{ background:var(--surface-1); border-radius:var(--hx-radius); padding:22px 24px; border:1px solid var(--hx-line); min-width:0; }
.hx-section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.hx-section-head h3{ margin:0; font:700 17px/1.4 var(--font-ui); }
.hx-section-head p{ margin:2px 0 0; font:500 13.5px/1.5 var(--font-ui); color:var(--text-muted); }
.hx-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--hx-gap); }
.hx-fields{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:18px 24px; margin:0; }
.hx-fields div{ min-width:0; }
.hx-fields dt{ font:500 13px/1.4 var(--font-ui); color:var(--text-muted); }
.hx-fields dd{ margin:4px 0 0; font:600 15px/1.45 var(--font-ui); color:var(--text-primary); overflow-wrap:anywhere; }
.hx-fields dd.is-empty{ color:var(--text-muted); font-weight:500; }
.hx-fields dd.is-ltr{ direction:ltr; unicode-bidi:isolate; text-align:end; }

/* ---------- status badges ---------- */
.hx-badge{ display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:0 10px; border-radius:999px; font:600 12.5px/1 var(--font-ui); background:var(--surface-2); color:var(--text-secondary); }
.hx-badge::before{ content:""; inline-size:7px; block-size:7px; border-radius:50%; background:currentColor; }
.hx-badge.is-good{ background:var(--status-good-soft); color:var(--status-good); }
.hx-badge.is-warn{ background:var(--status-warning-soft); color:var(--status-warning); }
.hx-badge.is-bad{ background:var(--status-critical-soft); color:var(--status-critical); }
.hx-badge.is-info{ background:var(--brand-primary-soft); color:var(--brand-primary-strong); }

/* ---------- list rows (links, requests, documents) ---------- */
.hx-list{ display:flex; flex-direction:column; }
.hx-row{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:14px 0; }
.hx-row + .hx-row{ border-top:1px solid var(--hx-line); }
.hx-row b{ font:600 15px/1.4 var(--font-ui); }
.hx-row small{ display:block; margin-top:3px; font:500 13px/1.5 var(--font-ui); color:var(--text-muted); }

/* ---------- states ---------- */
.hx-empty, .hx-error, .hx-loading{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:32px 16px; border-radius:var(--hx-radius); }
.hx-empty{ background:var(--surface-2); color:var(--text-secondary); }
.hx-empty b, .hx-error b{ font:700 15px/1.4 var(--font-ui); color:var(--text-primary); }
.hx-empty p, .hx-error p{ margin:0; font:500 13.5px/1.6 var(--font-ui); max-width:46ch; }
.hx-error{ background:var(--status-critical-soft); color:var(--status-critical); }
.hx-skel{ border-radius:10px; background:linear-gradient(90deg, var(--surface-2) 0%, var(--surface-sunken) 50%, var(--surface-2) 100%); background-size:200% 100%; animation:hx-shimmer 1.2s linear infinite; }
@keyframes hx-shimmer{ to{ background-position:-200% 0; } }
.hx-notice{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px; background:var(--brand-accent-soft); color:var(--text-on-amber); font:500 14px/1.6 var(--font-ui); }
.hx-notice.is-good{ background:var(--status-good-soft); color:var(--status-good); }
.hx-notice.is-info{ background:var(--brand-primary-soft); color:var(--brand-primary-strong); }

/* ---------- forms ---------- */
.hx-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.hx-field label{ font:600 14px/1.4 var(--font-ui); color:var(--text-primary); }
.hx-field label .req{ color:var(--status-critical); margin-inline-start:4px; }
.hx-field .hint{ font:500 13px/1.5 var(--font-ui); color:var(--text-muted); }
.hx-field .err{ font:600 13px/1.5 var(--font-ui); color:var(--status-critical); }
.hx-input, .hx-select, .hx-textarea{ box-sizing:border-box; width:100%; min-height:48px; padding:10px 14px; border-radius:12px; border:1px solid var(--border-strong); background:var(--surface-1);
  color:var(--text-primary); font:500 16px/1.4 var(--font-ui); }   /* 16px: no zoom on iOS */
.hx-textarea{ min-height:110px; resize:vertical; }
.hx-input:focus, .hx-select:focus, .hx-textarea:focus{ outline:none; border-color:var(--brand-primary); box-shadow:var(--focus-ring); }
.hx-input[readonly], .hx-input:disabled{ background:var(--surface-2); color:var(--text-secondary); }
.hx-input.is-invalid, .hx-select.is-invalid{ border-color:var(--status-critical); }
.hx-input.is-ltr{ direction:ltr; text-align:end; }
.hx-form-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 20px; }
.hx-form-grid .is-wide{ grid-column:1 / -1; }

/* ---------- upload ---------- */
.hx-upload{ position:relative; display:flex; align-items:center; gap:14px; padding:16px; border-radius:14px; border:1.5px dashed var(--border-strong); background:var(--surface-2); cursor:pointer; }
.hx-upload:hover, .hx-upload:focus-within{ border-color:var(--brand-primary); background:var(--hx-tint); }
.hx-upload input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.hx-upload .hx-upload-icon{ inline-size:44px; block-size:44px; border-radius:12px; display:grid; place-items:center; background:var(--surface-1); color:var(--brand-primary); flex:none; }
.hx-upload b{ display:block; font:600 14.5px/1.4 var(--font-ui); }
.hx-upload small{ display:block; font:500 13px/1.5 var(--font-ui); color:var(--text-muted); }
.hx-upload.is-done{ border-style:solid; border-color:color-mix(in srgb, var(--status-good) 45%, transparent); background:var(--status-good-soft); }

/* ---------- stepper ---------- */
.hx-steps{ display:flex; gap:6px; counter-reset:hx; }
.hx-step{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:8px; font:600 13px/1.35 var(--font-ui); color:var(--text-muted); }
.hx-step::before{ content:""; display:block; height:4px; border-radius:4px; background:var(--surface-sunken); }
.hx-step.is-done::before{ background:var(--brand-teal); }
.hx-step.is-current{ color:var(--text-primary); }
.hx-step.is-current::before{ background:var(--brand-primary); }

/* ---------- drawer / sheet ---------- */
.hx-drawer-backdrop{ position:fixed; inset:0; background:var(--surface-overlay); z-index:90; }
.hx-drawer{ position:fixed; inset-block:0; inset-inline-start:0; inline-size:min(520px, 100vw); background:var(--surface-1); z-index:91; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.hx-drawer header{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--hx-line); }
.hx-drawer header h3{ margin:0; font:700 18px/1.4 var(--font-ui); }
.hx-drawer .hx-drawer-body{ padding:20px 22px; overflow:auto; flex:1; display:flex; flex-direction:column; gap:16px; }
.hx-drawer footer{ display:flex; gap:10px; justify-content:flex-end; padding:16px 22px; border-top:1px solid var(--hx-line); }

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .hx-facts{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .hx-fact:nth-child(4){ border-inline-start:0; }
  .hx-fact:nth-child(n+4){ border-top:1px solid rgba(255,255,255,.08); }
  .hx-group span{ font-size:13px; }
}
@media (max-width: 860px){
  .hx-hero-main{ grid-template-columns:auto 1fr; padding:22px 20px 18px; gap:16px 18px; }
  .hx-hero-side{ grid-column:1 / -1; flex-direction:row-reverse; justify-content:space-between; align-items:center; }
  .hx-groups{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); position:static; }
  .hx-group{ flex-direction:column; gap:4px; min-height:60px; padding:6px 4px; font-size:12.5px; }
  .hx-form-grid{ grid-template-columns:1fr; }
}
@media (max-width: 520px){
  .hx-avatar{ inline-size:72px; block-size:72px; border-radius:20px; font-size:24px; }
  .hx-hero h1{ font-size:21px; }
  .hx-hero .hx-sub{ font-size:14px; }
  .hx-facts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hx-fact{ padding:12px 16px; }
  .hx-fact:nth-child(n){ border-inline-start:0; border-top:1px solid rgba(255,255,255,.08); }
  .hx-fact:nth-child(2n){ border-inline-start:1px solid rgba(255,255,255,.08); }
  .hx-fact:nth-child(-n+2){ border-top:0; }
  .hx-hero-side{ flex-direction:column; align-items:stretch; }
  .hx-hero-actions{ width:100%; }
  .hx-hero-actions .hx-btn-primary{ flex:1; }
  .hx-completion{ justify-content:flex-start; text-align:start; flex-direction:row-reverse; }
  .hx-section{ padding:18px 16px; }
  .hx-fields{ grid-template-columns:1fr 1fr; gap:14px 16px; }
}
@media (prefers-reduced-motion: reduce){ .hx-skel{ animation:none; } .hx-btn{ transition:none; } }

/* ---------- R6 round-1 fixes from the screenshot review ---------- */
.hx-avatar .v16-emp-avatar, .hx-avatar .large-avatar{ background:transparent !important; color:#fff !important; border:0 !important; box-shadow:none !important; font:700 30px/1 var(--font-ui) !important; }
.hx-avatar .v16-emp-avatar > span{ color:#fff !important; }
.hx-avatar .v16-avatar-upload{ inset:auto auto 6px 6px !important; inline-size:28px; block-size:28px; border-radius:50%; background:#fff !important; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.hx-legacy .employee-workflow-strip > div{ border:0 !important; background:var(--surface-2) !important; border-radius:12px !important; box-shadow:none !important; }
.hx-legacy .profile-alerts-list li, .hx-legacy .profile-alerts-list > *{ background:var(--brand-accent-soft) !important; color:var(--text-on-amber) !important; border:0 !important; border-radius:12px !important; }
:root[data-theme="dark"] .hx-legacy .profile-alerts-list li, :root[data-theme="dark"] .hx-legacy .profile-alerts-list > *{ background:rgba(242,169,59,.12) !important; color:#ffd9a0 !important; }
.hx-legacy .empty-state{ border-style:solid !important; border-color:transparent !important; background:var(--surface-2) !important; }
@media (max-width: 860px){ .hx-page{ padding-bottom:96px; } }

/* ---------- ESS (employee self-service) ---------- */
.hx-ess-nav{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.hx-ess-nav > .hx-btn{ align-self:flex-end; }
.hx-ess-nav .hx-menu .hx-menu-list{ inset-inline-end:0; }
.hx-ess-card{ display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; padding:24px; border-radius:22px;
  background:linear-gradient(135deg, var(--hx-tint), var(--surface-1) 70%); border:1px solid var(--hx-line); }
.hx-ess-photo{ position:relative; inline-size:92px; block-size:92px; }
.hx-ess-photo > img, .hx-ess-photo > span{ inline-size:92px; block-size:92px; border-radius:50%; object-fit:cover; display:grid; place-items:center;
  background:var(--brand-primary-strong); color:#fff; font:700 34px/1 var(--font-ui); box-shadow:0 0 0 4px var(--surface-1), 0 6px 18px rgba(11,62,140,.18); }
.hx-ess-photo-btn{ all:unset; position:absolute; inset-block-end:0; inset-inline-start:0; inline-size:34px; block-size:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-1); color:var(--brand-primary-strong); box-shadow:var(--shadow-md); cursor:pointer; }
.hx-ess-photo-btn svg{ inline-size:18px; block-size:18px; }
.hx-ess-photo-btn:focus-visible{ box-shadow:var(--focus-ring); }
.hx-ess-id h1{ margin:0; font:700 24px/1.3 var(--font-ui); }
.hx-ess-id > p{ margin:6px 0 0; font:500 15px/1.5 var(--font-ui); color:var(--text-secondary); }
.hx-ess-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.hx-ess-note{ margin:10px 0 0; font:500 13.5px/1.5 var(--font-ui); color:var(--status-critical); }
.hx-ess-progress{ display:flex; align-items:center; gap:12px; max-width:260px; }
.hx-ess-progress .hx-ring{ --hx-ring-track:var(--surface-sunken); }
.hx-ess-progress .hx-ring span{ background:var(--surface-1); color:var(--text-primary); }
.hx-ess-progress b{ display:block; font:700 15px/1.4 var(--font-ui); }
.hx-ess-progress small{ display:block; margin-top:2px; font:500 13px/1.5 var(--font-ui); color:var(--text-muted); }
.hx-ess-quick{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.hx-ess-quick button{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:4px; padding:16px 18px; border-radius:16px; background:var(--surface-1); border:1px solid var(--hx-line); cursor:pointer; }
.hx-ess-quick button:hover{ border-color:color-mix(in srgb, var(--brand-primary) 35%, transparent); }
.hx-ess-quick button:focus-visible{ box-shadow:var(--focus-ring); }
.hx-ess-quick b{ font:700 15px/1.4 var(--font-ui); color:var(--text-primary); }
.hx-ess-quick small{ font:500 13px/1.45 var(--font-ui); color:var(--text-muted); }
@media (max-width: 860px){
  .hx-ess-card{ grid-template-columns:auto 1fr; padding:20px; }
  .hx-ess-progress{ grid-column:1 / -1; max-width:none; }
  .hx-ess-quick{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hx-ess-nav .hx-groups{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .hx-ess-card{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .hx-ess-tags{ justify-content:center; }
  .hx-ess-progress{ justify-content:center; text-align:start; }
}
.hx-ess-profile .hx-grid{ grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); }
@media (max-width: 960px){ .hx-ess-profile .hx-grid{ grid-template-columns:1fr; } }
@media (max-width: 520px){ .hx-fields div:has(> dd.is-ltr){ grid-column:1 / -1; } }

/* ---------- navigation (R6 audit A4) ---------- */
/* labels wrap to a second line instead of being cut mid-word ("الموارد البـ…", "إغلاق الشهر — كشف…") */
.module-rail.is-expanded .module-rail-label{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; line-height:1.3; }
.ds-sidebar:not(.is-collapsed) .ds-nav-item > span:not(.nav-icon):not(.nav-badge){ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; line-height:1.35; }
/* a tenant's light sidebar colour must not leave a white sidebar on a dark page: in dark theme the sidebar follows the theme */
html[data-theme="dark"][data-sidebar-tone="light"] .ds-sidebar{ background:linear-gradient(180deg,#0d1f35 0%,#0a192b 100%) !important; color:#e6edf5 !important; border-color:rgba(255,255,255,.06) !important; }
html[data-theme="dark"][data-sidebar-tone="light"] .ds-sidebar-brand{ border-block-end-color:rgba(255,255,255,.08) !important; }
html[data-theme="dark"][data-sidebar-tone="light"] .ds-nav-group-label{ color:rgba(230,237,245,.55) !important; }
html[data-theme="dark"][data-sidebar-tone="light"] .ds-nav-item{ color:rgba(230,237,245,.82) !important; }
html[data-theme="dark"][data-sidebar-tone="light"] .ds-nav-item:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; }
html[data-theme="dark"][data-sidebar-tone="light"] .ds-nav-item.is-active{ background:rgba(11,207,174,.14) !important; color:#fff !important; }
html[data-theme="dark"][data-sidebar-tone="light"] #sidebar [data-app-name], html[data-theme="dark"][data-sidebar-tone="light"] #sidebar [data-accredited-company],
html[data-theme="dark"][data-sidebar-tone="light"] #sidebar .ds-sidebar-close{ color:#e6edf5 !important; }
html[data-theme="dark"][data-sidebar-tone="light"] #sidebar .tenant-brand-card{ background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.08) !important; }
html[data-theme="dark"][data-sidebar-tone="light"] #sidebar .tenant-brand-copy small{ color:rgba(230,237,245,.6) !important; }
html[data-theme="dark"][data-sidebar-tone="light"] .module-rail{ background:#081626 !important; border-inline-end-color:rgba(255,255,255,.06) !important; }
html[data-theme="dark"][data-sidebar-tone="light"] .module-rail-btn{ color:rgba(230,237,245,.7) !important; }
html[data-theme="dark"][data-sidebar-tone="light"] .module-rail-btn.active, html[data-theme="dark"][data-sidebar-tone="light"] .module-rail-btn:hover{ color:#fff !important; }
html[data-theme="dark"][data-sidebar-tone="light"] .module-rail-icon{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
html[data-theme="dark"][data-sidebar-tone="light"] .module-nav-search{ background:rgba(255,255,255,.06) !important; }
html[data-theme="dark"][data-sidebar-tone="light"] .module-nav-search input{ color:#fff !important; }

/* ---------- R6 sweep fixes ---------- */
/* the photo-upload control sits on the avatar's corner, never over the initials / photo */
.hx-avatar{ overflow:visible; }
.hx-avatar img, .hx-avatar .v16-emp-avatar img{ border-radius:24px; }
.hx-avatar .v16-avatar-upload{ inset:auto auto -6px -6px !important; inline-size:28px !important; block-size:28px !important; border:2px solid var(--hx-ink) !important; overflow:hidden; }
@media (max-width: 520px){ .hx-avatar img, .hx-avatar .v16-emp-avatar img{ border-radius:20px; } }
/* soft notices follow the dark theme */
:root[data-theme="dark"] .hx-notice{ background:rgba(242,169,59,.12); color:#ffd9a0; }
:root[data-theme="dark"] .hx-notice.is-info{ background:rgba(10,132,201,.16); color:#cfe5ff; }
:root[data-theme="dark"] .hx-notice.is-good{ background:rgba(12,163,12,.16); color:#a8ecb0; }
:root[data-theme="dark"] .hx-error{ background:rgba(181,42,42,.18); color:#ffb3b3; }
:root[data-theme="dark"] .hx-error b{ color:#ffd0d0; }
:root[data-theme="dark"] .hx-empty{ background:rgba(255,255,255,.04); }
.hx-avatar .v16-avatar-upload{ cursor:pointer; background:#fff center / 15px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3e8c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") !important; }
.hx-avatar .v16-avatar-upload input{ position:absolute; inset:0; opacity:0; cursor:pointer; }