/* Hadreen Workspace — navy & gold, with one token system for every module. */
html[data-hadreen-workspace] {
  --hx-navy:#0C2556; --hx-deep:#061A3D; --hx-action:#173B73;
  --hx-gold:#D49F36; --hx-gold-deep:#B88313; --hx-gold-tint:#FFF5D8;
  --bg:#F6F8FB; --surface:#FFFFFF; --surface2:#F6F8FB; --surface3:#EDF1F7;
  --border:#E5EAF2; --border2:#CFD8E6; --text:#101827; --text2:#526279; --text3:#64748B;
  --mint:#173B73; --teal:#173B73; --teal2:#315D96; --blue:#173B73;
  --gold:#B88313; --gold2:#B88313; --yellow:#9C690C; --coral:#BA414A; --green:#23775C; --purple:#79649E; --orange:#A96324;
  --sem-critical:#BA414A; --sem-action:#9C690C; --sem-warn:#9C690C; --sem-info:#173B73; --sem-ok:#23775C; --sem-exp:#79649E;
  --radius:12px; --radius-sm:8px; --radius-xs:6px;
  --shadow-sm:0 1px 3px #0c255608; --shadow:0 3px 15px #0c255608; --shadow-lg:0 12px 38px #0c255614;
  --glow-mint:none; --glow-coral:none; --glow-blue:none; --glow-gold:none;
  --hx-tint:#EDF2FA; --hx-success-bg:#EDF7F1; --hx-warning-bg:#FFF5D8; --hx-danger-bg:#FBEEF0;
  --hx-header:#0C2556; --hx-header-text:#FFFFFF; --hx-focus:#B88313; --hx-font:'Inter','IBM Plex Sans Arabic',sans-serif;
  color-scheme:light;
}
html[data-hadreen-workspace][data-workspace-theme="dark"] {
  --bg:#081629; --surface:#101F36; --surface2:#15263F; --surface3:#1B2E4A;
  --border:#253751; --border2:#3A506E; --text:#EDF2FA; --text2:#B1BFD3; --text3:#9AACC5;
  --mint:#9DBCEB; --teal:#9DBCEB; --teal2:#BDD2F2; --blue:#9DBCEB;
  --gold:#E5B752; --gold2:#E5B752; --yellow:#E5B752; --coral:#F18C94; --green:#83CAA6; --purple:#C5B3E3; --orange:#E4B081;
  --sem-critical:#F18C94; --sem-action:#E5B752; --sem-warn:#E5B752; --sem-info:#9DBCEB; --sem-ok:#83CAA6; --sem-exp:#C5B3E3;
  --hx-tint:#1C3151; --hx-success-bg:#173A32; --hx-warning-bg:#3A301C; --hx-danger-bg:#3D2430;
  --hx-header:#061A3D; --hx-focus:#E5B752; --shadow:0 3px 15px #00000012; --shadow-lg:0 14px 40px #00000033;
  color-scheme:dark;
}
html[data-hadreen-workspace][lang="ar"] { --hx-font:'IBM Plex Sans Arabic','Inter',sans-serif; }
html[data-hadreen-workspace] body { font-family:var(--hx-font)!important; font-size:14px; line-height:1.5; background:var(--bg); color:var(--text); }
html[data-hadreen-workspace] button, html[data-hadreen-workspace] input, html[data-hadreen-workspace] select, html[data-hadreen-workspace] textarea { font-family:var(--hx-font)!important; }
html[data-hadreen-workspace] :focus-visible { outline:3px solid var(--hx-focus)!important; outline-offset:3px; }
html[data-hadreen-workspace] [hidden] { display:none!important; }
.hx-sr-only { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip-path:inset(50%); white-space:nowrap; }
html[data-hadreen-workspace] .notif-panel:not(.open), html[data-hadreen-workspace] .oc-drawer:not(.open) { visibility:hidden; box-shadow:none; }
html[data-hadreen-workspace] .toast { left:auto; right:auto; width:max-content; }
html[data-hadreen-workspace] #pw-eye { right:auto!important; left:auto!important; inset-inline-end:12px; }
html[data-hadreen-workspace] #login-pw { padding-inline-end:42px; }
html[data-hadreen-workspace] ::-webkit-scrollbar { width:7px; height:7px; }
html[data-hadreen-workspace] .sidebar, html[data-hadreen-workspace] .main>.topbar, html[data-hadreen-workspace] .mobile-nav, html[data-hadreen-workspace] .menu-toggle, html[data-hadreen-workspace] .tweaks-fab { display:none!important; }
html[data-hadreen-workspace] .app { height:calc(100dvh - 62px); width:100%; }
html[data-hadreen-workspace] .main { margin:0!important; min-height:0; }
html[data-hadreen-workspace] .page-area { scroll-behavior:smooth; overscroll-behavior:contain; }
html[data-hadreen-workspace] .page { padding:26px 36px 48px; max-width:1680px; margin-inline:auto; animation:none; }
html[data-hadreen-workspace] .greeting-strip { gap:16px; padding-top:0; margin-bottom:25px; }
html[data-hadreen-workspace] .greeting-left h2, html[data-hadreen-workspace] .greeting-left h2 span { font-size:25px; font-weight:650; letter-spacing:-.6px; color:var(--text); }
html[data-hadreen-workspace] .greeting-left p { font-size:13px; color:var(--text3); margin-top:5px; line-height:1.7; }
html[data-hadreen-workspace] .greeting-right { flex-wrap:wrap; gap:8px; }
html[data-hadreen-workspace] .panel, html[data-hadreen-workspace] .kcard { background:var(--surface)!important; border:1px solid var(--border)!important; box-shadow:var(--shadow-sm)!important; border-radius:12px; background-image:none!important; }
html[data-hadreen-workspace] .panel { padding:22px; margin-bottom:20px; }
html[data-hadreen-workspace] .panel:hover, html[data-hadreen-workspace] .kcard:hover { transform:none!important; box-shadow:var(--shadow-sm)!important; }
html[data-hadreen-workspace] .panel-title { font-size:15px!important; font-weight:650; letter-spacing:0; color:var(--text); }
html[data-hadreen-workspace] .panel-hdr { margin-bottom:18px; gap:12px; flex-wrap:wrap; }
html[data-hadreen-workspace] .panel-badge { font-size:11px; padding:4px 9px; color:var(--text3); background:var(--surface2); border:1px solid var(--border); }
html[data-hadreen-workspace] .kpi-strip { gap:16px; margin-bottom:24px; }
html[data-hadreen-workspace] .kcard { padding:22px; gap:16px; }
html[data-hadreen-workspace] .kcard::after, html[data-hadreen-workspace] .panel::before { display:none; }
html[data-hadreen-workspace] .kcard-val { font-size:28px; line-height:1.2; font-weight:650; letter-spacing:-.8px; color:var(--text); }
html[data-hadreen-workspace] .kcard-label { font-size:13px; white-space:normal; color:var(--text2); }
html[data-hadreen-workspace] .kcard-sub, html[data-hadreen-workspace] .kpill { font-size:11px; }
html[data-hadreen-workspace] .kcard-icon-wrap { width:44px; height:44px; background:var(--hx-tint); color:var(--mint); border-radius:10px; }
html[data-hadreen-workspace] .kcard-clickable { cursor:pointer; }
html[data-hadreen-workspace] .kcard-clickable:hover { border-color:var(--border2)!important; }
html[data-hadreen-workspace] .btn { min-height:38px; padding:8px 14px!important; font-size:13px!important; border-radius:7px; font-weight:600; box-shadow:none!important; gap:7px; letter-spacing:0; }
html[data-hadreen-workspace] .btn:hover { transform:none; }
html[data-hadreen-workspace] .btn-mint { background:var(--hx-gold)!important; color:var(--hx-deep)!important; border:1px solid var(--hx-gold)!important; }
html[data-hadreen-workspace] .btn-mint:hover { background:var(--hx-gold-deep)!important; border-color:var(--hx-gold-deep)!important; }
html[data-hadreen-workspace] .btn-ghost { background:var(--surface)!important; color:var(--text2)!important; border:1px solid var(--border2)!important; }
html[data-hadreen-workspace] .btn-ghost:hover { background:var(--surface2)!important; color:var(--text)!important; }
html[data-hadreen-workspace] .btn-blue { background:var(--hx-action)!important; color:white!important; }
html[data-hadreen-workspace] .btn-coral { background:var(--hx-danger-bg)!important; color:var(--coral)!important; border:1px solid color-mix(in srgb,var(--coral) 30%,transparent)!important; }
html[data-hadreen-workspace] .badge, html[data-hadreen-workspace] .hac-pill { font-size:11px!important; padding:4px 9px; border-radius:5px; font-weight:550; line-height:1.4; }
html[data-hadreen-workspace] :is(.b-mint,.b-green,.kpill-green,.kpill-mint) { color:var(--green); background:var(--hx-success-bg); }
html[data-hadreen-workspace] :is(.b-yellow,.kpill-action,.kpill-yell) { color:var(--yellow); background:var(--hx-warning-bg); }
html[data-hadreen-workspace] :is(.b-coral,.kpill-coral) { color:var(--coral); background:var(--hx-danger-bg); }
html[data-hadreen-workspace] .b-blue { color:var(--mint); background:var(--hx-tint); }
html[data-hadreen-workspace] .grid { gap:20px; }
html[data-hadreen-workspace] .grid > * { min-width:0; }
html[data-hadreen-workspace] .tbl-wrap { max-width:100%; overflow-x:auto; }
html[data-hadreen-workspace] #page-requests > .grid { grid-template-columns:minmax(0,1fr); }
html[data-hadreen-workspace] #req-pending-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
html[data-hadreen-workspace] .req-card { margin:0; padding:16px; gap:10px; min-width:0; align-items:flex-start; }
html[data-hadreen-workspace] #page-requests table.tbl { min-width:740px; }
html[data-hadreen-workspace] .pay-shell { display:block; }
html[data-hadreen-workspace] .pay-rail { width:100%; position:static; max-height:none; margin-bottom:24px; padding:10px 12px; border-radius:9px; display:flex; align-items:center; flex-wrap:wrap; gap:6px; overflow:visible; }
html[data-hadreen-workspace] .pay-main { width:100%; }
html[data-hadreen-workspace] .pay-nav { background:none; border:0; border-radius:6px; padding:10px 14px; min-height:40px; font-size:13px; color:var(--text2); }
html[data-hadreen-workspace] .pay-nav.active { background:var(--hx-tint); color:var(--mint); box-shadow:none; }
html[data-hadreen-workspace] .pay-nav.active::before { display:none; }
.hx-pay-tools { margin-inline-start:auto; width:230px; max-width:100%; min-height:40px; background:var(--surface); color:var(--text2); border:1px solid var(--border2); border-radius:6px; padding:8px 10px; font-size:12px; }
html[data-hadreen-workspace] :is(.pay-head h2,.ad-title) { font-size:25px; font-weight:650; }
html[data-hadreen-workspace] :is(.pay-k-lbl,.ad-k-lbl) { font-size:12px; font-weight:550; }
html[data-hadreen-workspace] :is(.pay-k-sub,.ad-k-sub) { font-size:11px; }
html[data-hadreen-workspace] :is(.pay-k,.ad-kpi) { padding:19px; border-radius:10px; }
html[data-hadreen-workspace] .pay-k::after { display:none; }
html[data-hadreen-workspace] .pay-vbars { height:190px; }
html[data-hadreen-workspace] .pay-k-val { font-weight:650; font-size:26px; }
.hx-section-tabs { display:flex; align-items:center; flex-wrap:wrap; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:9px; margin-bottom:24px; }
.hx-section-tabs button { padding:10px 13px; min-height:40px; border:0; border-radius:6px; cursor:pointer; background:none; color:var(--text2); font-size:12px; }
.hx-section-tabs button[aria-current="page"] { color:var(--mint); background:var(--hx-tint); font-weight:600; }
.hx-section-tabs button:hover { background:var(--surface2); }
.hx-page-note { color:var(--text3); font-size:11px; margin-top:28px; display:flex; align-items:center; gap:8px; }
.hx-page-note .hx-icon { width:14px; height:14px; }
.hx-table-scroll { overflow-x:auto; max-width:100%; min-width:0; }
html[data-hadreen-workspace][lang="en"] .profile-name.arabic { text-align:left; }
html[data-hadreen-workspace] :is(.pf-tab,.att-nav-item,.pay-chip.on) { background-image:none!important; }
html[data-hadreen-workspace] .panel-title > .hx-icon { width:17px; height:17px; color:var(--mint); margin-inline-end:7px; }
html[data-hadreen-workspace] table.tbl { font-size:13px; }
html[data-hadreen-workspace] table.tbl thead th { padding:13px 16px; font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--text2); background:var(--surface2); }
html[data-hadreen-workspace] table.tbl tbody td { padding:14px 16px; font-size:13px; }
html[data-hadreen-workspace] table.tbl tbody tr { border-color:var(--border); }
html[data-hadreen-workspace] table.tbl tbody tr:hover { background:var(--surface2); }
html[data-hadreen-workspace] .tbl-wrap { border:1px solid var(--border); border-radius:9px; }
html[data-hadreen-workspace] :is(.form-input,.form-select,.form-textarea,.search-input,.sel) { padding:10px 12px!important; min-height:40px; font-size:14px!important; color:var(--text); background:var(--surface)!important; border:1px solid var(--border2); border-radius:7px; }
html[data-hadreen-workspace] .form-label { font-size:12px!important; font-weight:550; text-transform:none; letter-spacing:0; color:var(--text2); margin-bottom:5px; }
html[data-hadreen-workspace] .form-row { gap:16px; margin-bottom:17px; }
html[data-hadreen-workspace] .filter-row { gap:10px; margin-bottom:20px; }
html[data-hadreen-workspace] .modal-overlay { background:#061A3D70; backdrop-filter:blur(4px); }
html[data-hadreen-workspace] .modal-box { background:var(--surface)!important; color:var(--text); box-shadow:var(--shadow-lg); border:1px solid var(--border); border-radius:14px; padding:30px; max-height:88dvh; }
html[data-hadreen-workspace] .modal-title { font-size:22px; padding-inline-end:30px; font-weight:650; color:var(--text); }
html[data-hadreen-workspace] .modal-sub { font-size:13px; margin:8px 0 24px; }
html[data-hadreen-workspace] .modal-close { width:36px; height:36px; top:17px; inset-inline-end:17px; left:auto; right:auto; }
html[data-hadreen-workspace] .modal-footer { gap:10px; padding-top:20px; margin-top:24px; }
html[data-hadreen-workspace] .toast { border-color:var(--border2)!important; color:var(--text)!important; background:var(--surface)!important; max-width:calc(100vw - 32px); inset-inline-end:24px; bottom:24px; box-shadow:var(--shadow-lg); font-size:13px; font-weight:500; z-index:3000; }
html[data-hadreen-workspace] .info-lbl { font-size:12px!important; text-transform:none; letter-spacing:0; color:var(--text3); }
html[data-hadreen-workspace] .info-val { font-size:14px!important; }
html[data-hadreen-workspace] .info-item { padding:16px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; }
html[data-hadreen-workspace] .profile-hero { background:var(--surface)!important; border:1px solid var(--border); padding:28px; border-radius:12px; }
html[data-hadreen-workspace] .profile-name { font-size:27px; }
html[data-hadreen-workspace] .profile-sub { font-size:13px; }
html[data-hadreen-workspace] :is(.tab-btn,.wf-tab,.set-tab,.lv-tab,.pf-tab) { min-height:40px; font-size:13px!important; }
html[data-hadreen-workspace][lang="ar"] :is(h1,h2,h3,.nav-label,.form-label,.badge,.panel-title,.dash-band-label) { letter-spacing:0!important; }

/* The shared shell */
.hx-icon { width:20px; height:20px; display:inline-block; flex-shrink:0; vertical-align:middle; }
.hx-skip { position:fixed; top:-80px; inset-inline-start:18px; z-index:9999; padding:12px 18px; background:var(--hx-gold); color:var(--hx-deep); border-radius:6px; }
.hx-skip:focus { top:10px; }
.hx-header { height:62px; display:flex; align-items:center; gap:22px; padding:0 26px; background:var(--hx-header); color:var(--hx-header-text); border-bottom:1px solid #ffffff10; position:relative; z-index:310; }
.hx-header button { border:0; cursor:pointer; }
.hx-tenant-logo { width:44px; height:44px; display:grid; place-items:center; flex-shrink:0; padding:5px; border-radius:8px; background:#ffffff10; color:#E8EDF7; border:1px solid #ffffff18!important; }
.hx-tenant-logo:hover { background:#ffffff18; color:white; }
.hx-tenant-logo img { width:100%; height:100%; object-fit:contain; display:block; border-radius:5px; }
.hx-tenant-logo .hx-icon { width:25px; height:25px; }
.hx-brand { display:flex; align-items:center; gap:10px; color:#fff; background:none; font-size:21px; font-weight:650; letter-spacing:-.6px; padding:0; }
.hx-mark { width:30px; height:33px; position:relative; display:flex; align-items:flex-end; gap:3px; transform:skewY(-10deg); }
.hx-mark i { display:block; width:7px; background:var(--hx-gold); border-radius:2px; height:19px; }
.hx-mark i:nth-child(2) { height:26px; }
.hx-mark i:nth-child(3) { height:33px; }
.hx-header-divider { width:1px; height:23px; background:#ffffff25; }
.hx-app-toggle { display:flex; align-items:center; gap:9px; background:none; color:#D8E2F3; padding:10px 8px; border-radius:6px; font-size:13px; }
.hx-app-toggle:hover,.hx-header-icon:hover { background:#ffffff14; color:white; }
.hx-admin-trigger[hidden] { display:none!important; }
.hx-header-search { display:flex; align-items:center; gap:10px; margin-inline:auto; height:36px; width:310px; border:1px solid #ffffff20!important; background:#ffffff08; color:#C8D5E9; border-radius:7px; padding:0 12px; font-size:12px; text-align:start; }
.hx-header-search .hx-icon { width:16px; height:16px; }
.hx-header-search kbd { margin-inline-start:auto; font-family:inherit; font-size:10px; color:#B3C3DC; background:#ffffff0c; padding:1px 5px; border:1px solid #ffffff14; border-radius:3px; }
.hx-header-actions { display:flex; align-items:center; gap:5px; margin-inline-start:auto; }
.hx-company { font-size:12px; color:#DAE3F2; display:flex; align-items:center; gap:8px; margin-inline-end:15px; }
.hx-header-icon { height:38px; min-width:38px; display:flex; align-items:center; justify-content:center; border-radius:6px; color:#DAE3F2; background:none; position:relative; font-size:12px; }
.hx-header-icon .hx-icon { width:18px; height:18px; }
.hx-notification-dot { position:absolute; top:6px; inset-inline-end:7px; width:6px; height:6px; border-radius:50%; background:var(--hx-gold); box-shadow:0 0 0 2px var(--hx-header); }
.hx-account { display:flex; align-items:center; gap:9px; background:none; color:white; margin-inline-start:7px; font-size:12px; }
.hx-avatar { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; font-size:11px; font-weight:600; background:#F1DCAD; color:#0C2556; }
.hx-global-nav { flex-shrink:0; display:flex; align-items:stretch; gap:5px; height:51px; border-bottom:1px solid var(--border); background:var(--surface); padding:0 28px; overflow-x:auto; scrollbar-width:thin; }
.hx-nav-item { display:flex; align-items:center; gap:8px; white-space:nowrap; background:none; border:none; border-bottom:2px solid transparent; color:var(--text2); padding:0 14px; cursor:pointer; font-size:13px; font-weight:500; }
.hx-nav-item .hx-icon { width:16px; height:16px; color:var(--text3); }
.hx-nav-item:hover { background:var(--surface2); color:var(--text); }
.hx-nav-item[aria-current="page"] { border-bottom-color:var(--hx-gold); color:var(--mint); font-weight:650; }
.hx-nav-item[aria-current="page"] .hx-icon { color:var(--mint); }
.hx-nav-item.hx-nav-settings { margin-inline-start:auto; }
.hx-context-nav { flex-shrink:0; padding:0 39px; display:flex; gap:22px; min-height:47px; align-items:center; border-bottom:1px solid var(--border); background:var(--surface); overflow-x:auto; scrollbar-width:thin; }
.hx-context-nav button { background:none; border:none; border-bottom:2px solid transparent; font-size:12px; color:var(--text3); cursor:pointer; align-self:stretch; white-space:nowrap; }
.hx-context-nav button[aria-current="page"] { color:var(--mint); border-bottom-color:var(--mint); font-weight:600; }
.hx-context-nav button:hover { color:var(--text); }
.hx-breadcrumb { font-size:12px; color:var(--text3); display:flex; align-items:center; gap:9px; margin-bottom:20px; }
.hx-breadcrumb button { background:none; border:none; padding:0; color:var(--text3); font-size:12px; cursor:pointer; }
.hx-breadcrumb .hx-icon { width:12px; height:12px; }
.hx-breadcrumb span:last-child { color:var(--text2); }

/* A calm, useful starting page. */
#hx-home { max-width:1380px; margin:0 auto; padding:35px 46px 45px; }
.hx-home-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:30px; }
.hx-eyebrow { display:flex; align-items:center; gap:7px; color:var(--text3); font-size:11px; font-weight:550; margin-bottom:7px; }
.hx-eyebrow-dot { width:5px; height:5px; background:var(--hx-gold); border-radius:50%; }
.hx-home-heading h1 { font-size:30px; line-height:1.4; font-weight:620; letter-spacing:-1px; color:var(--text); }
.hx-home-heading p { margin:6px 0 0; font-size:13px; color:var(--text3); }
.hx-date { display:flex; align-items:center; gap:9px; color:var(--text2); font-size:12px; }
.hx-date .hx-icon { color:var(--text3); width:17px; height:17px; }
.hx-hero-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:15px; margin-bottom:33px; }
.hx-stat { text-align:start; position:relative; min-height:126px; display:flex; flex-direction:column; justify-content:space-between; padding:19px 21px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; box-shadow:var(--shadow-sm); }
.hx-stat:hover { border-color:var(--border2); }
.hx-stat-top { display:flex; align-items:center; justify-content:space-between; color:var(--text2); font-size:12px; gap:12px; }
.hx-stat-top .hx-icon { color:var(--text3); width:17px; height:17px; }
.hx-stat-value { font-size:29px; font-weight:620; letter-spacing:-1px; line-height:1.25; margin-top:9px; }
.hx-stat-footer { color:var(--text3); display:flex; gap:6px; align-items:center; font-size:11px; margin-top:6px; }
.hx-stat-footer .hx-icon { width:12px; height:12px; }
.hx-stat:first-child { background:var(--hx-navy); color:white; border-color:var(--hx-navy); }
.hx-stat:first-child .hx-stat-top { color:#D9E3F4; }
.hx-stat:first-child .hx-icon { color:#E5B752; }
.hx-stat:first-child .hx-stat-footer { color:#BCCFEA; }
.hx-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.hx-section-head h2 { margin:0; font-size:16px; font-weight:650; letter-spacing:-.2px; }
.hx-section-head p { color:var(--text3); font-size:12px; margin-top:2px; }
.hx-link { display:inline-flex; align-items:center; gap:6px; background:none; padding:4px 0; border:none; color:var(--mint); font-size:12px; font-weight:550; cursor:pointer; }
.hx-link .hx-icon { width:14px; height:14px; }
.hx-apps-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.hx-app-card { display:flex; align-items:center; gap:15px; border:1px solid var(--border); background:var(--surface); padding:21px 20px; border-radius:10px; cursor:pointer; text-align:start; color:var(--text); min-width:0; transition:border-color .15s,box-shadow .15s,transform .15s; }
.hx-app-card:hover { border-color:var(--border2); box-shadow:var(--shadow); transform:translateY(-2px); }
.hx-app-card .hx-tile { width:44px; height:44px; display:grid; place-items:center; flex-shrink:0; background:var(--hx-tint); color:var(--mint); border-radius:10px; }
.hx-tile.gold { background:var(--hx-warning-bg); color:var(--gold); }
.hx-tile.green { background:var(--hx-success-bg); color:var(--green); }
.hx-tile.purple { background:color-mix(in srgb,var(--purple) 12%,var(--surface)); color:var(--purple); }
.hx-tile.red { background:var(--hx-danger-bg); color:var(--coral); }
.hx-app-card h3 { font-size:13px; font-weight:650; margin:0; }
.hx-app-card p { font-size:11px; color:var(--text3); margin-top:4px; line-height:1.4; }
.hx-app-card>.hx-icon { width:14px; height:14px; margin-inline-start:auto; color:var(--border2); }
.hx-lower-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:22px; margin-top:32px; align-items:start; }
.hx-card { background:var(--surface); border:1px solid var(--border); border-radius:11px; overflow:hidden; box-shadow:var(--shadow-sm); }
.hx-card-head { padding:20px 23px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hx-card-head h2 { font-size:14px; font-weight:650; display:flex; align-items:center; gap:9px; margin:0; }
.hx-counter { min-width:21px; height:21px; display:grid; place-items:center; font-size:10px; font-weight:600; background:var(--surface3); color:var(--text2); border-radius:5px; }
.hx-task { display:flex; align-items:center; gap:13px; padding:17px 23px; border-top:1px solid var(--border); background:none; width:100%; border-inline:0; border-bottom:0; text-align:start; color:var(--text); cursor:pointer; }
.hx-task:hover { background:var(--surface2); }
.hx-task-icon { background:var(--surface2); width:35px; height:35px; border-radius:8px; color:var(--text3); display:grid; place-items:center; flex-shrink:0; }
.hx-task-copy { min-width:0; flex:1; }
.hx-task-copy strong { font-size:12px; font-weight:550; display:block; }
.hx-task-copy small { font-size:11px; color:var(--text3); display:block; margin-top:4px; }
.hx-task>.hx-icon { color:var(--text3); width:15px; height:15px; }
.hx-status { padding:4px 8px; font-size:10px; font-weight:600; white-space:nowrap; border-radius:5px; background:var(--hx-warning-bg); color:var(--yellow); }
.hx-status.danger { background:var(--hx-danger-bg); color:var(--coral); }
.hx-status.success { background:var(--hx-success-bg); color:var(--green); }
.hx-calendar-row { display:flex; align-items:center; gap:14px; padding:15px 23px; border-top:1px solid var(--border); }
.hx-day-tile { width:40px; flex-shrink:0; text-align:center; background:var(--surface2); padding:5px 0; border-radius:7px; border:1px solid var(--border); }
.hx-day-tile strong { display:block; font-size:17px; font-weight:600; line-height:1.2; }
.hx-day-tile small { display:block; font-size:9px; color:var(--text3); text-transform:uppercase; }
.hx-calendar-row strong { font-size:12px; font-weight:550; }
.hx-calendar-row p { font-size:11px; color:var(--text3); margin-top:3px; }
.hx-workspace-note { padding:16px 23px; background:var(--surface2); border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; font-size:11px; color:var(--text3); }
.hx-workspace-note .hx-icon { width:15px; height:15px; }
.hx-home-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:10px; color:var(--text3); margin-top:25px; }

/* Search / app launcher and account menus. */
.hx-overlay { position:fixed; inset:0; z-index:1200; display:grid; place-items:start center; padding:100px 20px 24px; background:#061A3D66; backdrop-filter:blur(5px); }
.hx-launcher { width:720px; max-width:100%; max-height:calc(100dvh - 130px); overflow:auto; border:1px solid var(--border2); background:var(--surface); border-radius:16px; box-shadow:var(--shadow-lg); }
.hx-launcher-head { display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); padding:19px 23px; position:sticky; top:0; background:var(--surface); z-index:1; }
.hx-launcher-head>.hx-icon { color:var(--text3); }
.hx-launcher-head input { flex:1; min-width:0; background:none; color:var(--text); border:none; outline:none; font-size:16px; }
.hx-icon-button { width:36px; height:36px; display:grid; place-items:center; background:var(--surface2); color:var(--text2); border:1px solid var(--border); border-radius:7px; cursor:pointer; flex-shrink:0; }
.hx-launcher-body { padding:22px; }
.hx-launcher-label { font-size:10px; font-weight:650; color:var(--text3); text-transform:uppercase; letter-spacing:1px; margin:0 0 12px; }
.hx-launcher-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.hx-launcher-grid .hx-app-card { padding:15px; flex-direction:column; align-items:flex-start; gap:10px; }
.hx-launcher-grid .hx-app-card p { font-size:10px; }
.hx-search-result { display:flex; align-items:center; gap:12px; text-align:start; width:100%; padding:12px; border:none; background:none; border-radius:8px; color:var(--text); cursor:pointer; }
.hx-search-result:hover,.hx-search-result:focus-visible { background:var(--surface2); }
.hx-search-result span { flex:1; font-size:13px; }
.hx-search-result small { display:block; font-size:11px; color:var(--text3); margin-top:2px; }
.hx-search-result>.hx-icon { color:var(--text3); }
.hx-launcher-foot { display:flex; gap:15px; padding:12px 23px; font-size:10px; color:var(--text3); background:var(--surface2); border-top:1px solid var(--border); }
.hx-launcher-foot kbd { font-family:inherit; border:1px solid var(--border2); padding:1px 4px; border-radius:3px; margin-inline-end:4px; }
.hx-menu { position:fixed; z-index:1250; top:69px; inset-inline-end:24px; width:280px; max-width:calc(100vw - 32px); padding:7px; border:1px solid var(--border); background:var(--surface); border-radius:11px; box-shadow:var(--shadow-lg); }
.hx-menu-head { padding:12px; border-bottom:1px solid var(--border); margin-bottom:5px; color:var(--text); font-size:14px; font-weight:600; }
.hx-menu-head small { display:block; color:var(--text3); font-size:11px; font-weight:400; margin-top:3px; }
.hx-menu button { width:100%; display:flex; align-items:center; gap:10px; padding:11px 12px; color:var(--text2); background:none; border:0; cursor:pointer; text-align:start; font-size:13px; border-radius:6px; }
.hx-menu button:hover { background:var(--surface2); }
.hx-menu button .hx-icon { width:17px; height:17px; }
.hx-empty { padding:36px 22px; text-align:center; color:var(--text3); font-size:13px; }
.hx-empty .hx-icon { display:block; margin:0 auto 12px; width:32px; height:32px; color:var(--text3); }

/* People: clearer records and a useful card view. */
.hx-people-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.hx-person-card { padding:22px; border:1px solid var(--border); border-radius:10px; background:var(--surface); text-align:start; color:var(--text); cursor:pointer; }
.hx-person-card:hover { box-shadow:var(--shadow); border-color:var(--border2); }
.hx-person-top { display:flex; align-items:center; gap:13px; }
.hx-person-avatar { width:44px; height:44px; display:grid; place-items:center; border-radius:11px; background:var(--hx-tint); color:var(--mint); font-size:15px; font-weight:600; flex-shrink:0; }
.hx-person-top strong { font-size:14px; display:block; font-weight:600; }
.hx-person-top small { color:var(--text3); display:block; font-size:11px; margin-top:4px; }
.hx-person-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; border-top:1px solid var(--border); margin-top:18px; padding-top:15px; font-size:11px; color:var(--text3); }
.hx-person-dept { font-size:12px; margin:18px 0 0; color:var(--text2); display:flex; align-items:center; gap:7px; }
.hx-person-dept .hx-icon { width:14px; height:14px; }
.hx-person-cell { display:flex; align-items:center; gap:12px; border:0; padding:0; background:none; color:var(--text); text-align:start; cursor:pointer; }
.hx-person-cell .hx-person-avatar { width:34px; height:34px; font-size:11px; border-radius:8px; }
.hx-person-cell strong { font-size:13px; font-weight:550; }
.hx-person-cell small { font-size:10px; display:block; color:var(--text3); margin-top:2px; }
html[data-hadreen-workspace] #emp-view-container table.tbl :is(th,td) { text-align:start; }
.hx-view-switch { display:flex; border:1px solid var(--border2); border-radius:7px; overflow:hidden; }
.hx-view-switch button { display:flex; align-items:center; gap:6px; border:0; padding:8px 11px; background:var(--surface); color:var(--text3); font-size:12px; cursor:pointer; }
.hx-view-switch button[aria-pressed="true"] { background:var(--hx-tint); color:var(--mint); }
.hx-view-switch .hx-icon { width:15px; height:15px; }
.hx-selected-filter { display:flex; gap:9px; align-items:center; color:var(--text3); font-size:12px; padding:0 0 15px; }

/* A real welcome screen, sharing the workspace's theme. */
html[data-hadreen-workspace] #login-screen { background:var(--bg)!important; padding:30px; overflow:auto; z-index:2000; align-items:center; justify-content:center; gap:90px; }
html[data-hadreen-workspace] #login-screen { align-items:safe center; }
html[data-hadreen-workspace] #login-screen::before,html[data-hadreen-workspace] #login-screen::after { display:none; }
html[data-hadreen-workspace] .login-wrap { width:410px; padding:35px; margin:0; border:1px solid var(--border); background:var(--surface); border-radius:16px; flex-shrink:0; box-shadow:var(--shadow); }
html[data-hadreen-workspace] .login-logo { margin-bottom:25px; justify-content:flex-start; }
html[data-hadreen-workspace] .login-logo-mark { display:none; }
html[data-hadreen-workspace] .login-logo .hx-brand { color:var(--text); font-size:25px; }
html[data-hadreen-workspace] .login-title { font-size:25px; font-weight:650; text-align:start; color:var(--text); }
html[data-hadreen-workspace] .login-sub { font-size:12px; text-align:start; color:var(--text3); margin:7px 0 25px; }
html[data-hadreen-workspace] .login-label { font-size:12px; color:var(--text2); text-transform:none; letter-spacing:0; }
html[data-hadreen-workspace] .login-input { min-height:44px; border:1px solid var(--border2); background:var(--surface); color:var(--text); font-size:14px; border-radius:7px; }
html[data-hadreen-workspace] .login-hint { font-size:10px; color:var(--text3); line-height:1.5; }
html[data-hadreen-workspace] .login-btn { background:var(--hx-gold)!important; color:var(--hx-deep)!important; box-shadow:none; border-radius:7px; min-height:44px; font-weight:650; font-size:14px; }
html[data-hadreen-workspace] .login-quick-btn { border:1px solid var(--border); border-radius:7px; padding:10px; background:var(--surface2); color:var(--text); min-height:45px; }
html[data-hadreen-workspace] .login-quick-btn:hover { border-color:var(--hx-gold); }
html[data-hadreen-workspace] .login-quick-role { font-size:11px; color:var(--text); }
html[data-hadreen-workspace] .login-quick-code { display:none; }
html[data-hadreen-workspace] .login-quick-title { display:none; }
html[data-hadreen-workspace] .login-divider { font-size:11px; color:var(--text3); margin:23px 0 15px; }
.hx-login-story { max-width:410px; color:var(--text); }
.hx-login-story .hx-eyebrow { color:var(--gold); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.hx-login-story h1 { font-size:47px; line-height:1.23; font-weight:620; letter-spacing:-1.8px; margin:16px 0 18px; }
.hx-login-story h1 span { color:var(--gold); }
.hx-login-story>p { font-size:15px; line-height:1.9; color:var(--text3); }
.hx-login-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin:34px 0; }
.hx-login-tile { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:22px 12px; text-align:center; font-size:11px; color:var(--text2); }
.hx-login-tile .hx-icon { display:block; width:26px; height:26px; margin:0 auto 12px; color:var(--mint); }
.hx-login-controls { display:flex; gap:14px; align-items:center; }
.hx-login-controls button { background:none; border:0; color:var(--text3); font-size:12px; cursor:pointer; display:flex; gap:7px; align-items:center; padding:10px 0; }
.hx-login-controls .hx-icon { width:16px; height:16px; }

@media(min-width:1800px) { #hx-home { padding-top:50px; } .hx-app-card { padding:26px; } }
@media(max-width:1150px) {
  .hx-company { display:none; } .hx-header-search { width:240px; } .hx-header { gap:16px; }
  .hx-global-nav { padding-inline:16px; gap:0; } .hx-nav-item { padding-inline:11px; }
  #hx-home { padding:29px 28px 40px; } .hx-app-card { padding:17px 15px; gap:11px; }
  .hx-app-card p { font-size:10px; } .hx-app-card>.hx-icon { display:none; }
  .hx-hero-grid { grid-template-columns:repeat(4,1fr); }
  .hx-people-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-hadreen-workspace] #login-screen { gap:40px; }
  .hx-login-story { max-width:330px; } .hx-login-story h1 { font-size:38px; }
}
@media(max-width:800px) {
  html[data-hadreen-workspace] :is(.hx-flex-tools,.hd-toolbar-right) { flex-wrap:wrap!important; min-width:0!important; max-width:100%; }
  html[data-hadreen-workspace] .hx-flex-tools > :is(input,select), html[data-hadreen-workspace] .hd-toolbar-right > :is(input,select) { flex:1 1 140px; min-width:0!important; max-width:100%; }
  html[data-hadreen-workspace] .panel-hdr > div { min-width:0; max-width:100%; }
  html[data-hadreen-workspace] .greeting-right { min-width:0; max-width:100%; }
  html[data-hadreen-workspace] .greeting-right select { min-width:0!important; width:100%; }
  html[data-hadreen-workspace] :is(.gror-kpis,#gro-expiry-body .gror-kpis,.exp-mood-row) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-hadreen-workspace] .lc-board { grid-template-columns:minmax(0,1fr); }
  html[data-hadreen-workspace] .lc-col { min-width:0; }
  html[data-hadreen-workspace] .lc-col { grid-template-columns:minmax(0,1fr); }
  html[data-hadreen-workspace] .lc-col-hdr { flex-wrap:wrap; gap:7px; }
  html[data-hadreen-workspace] .hacl-top { flex-wrap:wrap; }
  html[data-hadreen-workspace] .hacl-meta { flex-direction:row; flex-wrap:wrap; max-width:100%; }
  html[data-hadreen-workspace] .doc-actions { flex-wrap:wrap; }
  html[data-hadreen-workspace] .hac-actions { flex-wrap:wrap; }
  html[data-hadreen-workspace] .gro-tabs { overflow-x:auto; max-width:100%; }
  html[data-hadreen-workspace] .gror-grid2 { grid-template-columns:minmax(0,1fr); }
  html[data-hadreen-workspace] .gror-bar-row { grid-template-columns:minmax(0,120px) minmax(20px,1fr) 34px; }
  html[data-hadreen-workspace] .ad-an { grid-template-columns:minmax(0,1fr); }
  html[data-hadreen-workspace] .psx-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-hadreen-workspace] .psx-card-val { font-size:19px; overflow-wrap:anywhere; }
  html[data-hadreen-workspace] .me-tl-acts { flex-wrap:wrap; }
  html[data-hadreen-workspace] .me-week { overflow-x:auto; }
  html[data-hadreen-workspace] .me-week-days { min-width:250px; }
  html[data-hadreen-workspace] #page-discipline .panel span { overflow-wrap:anywhere; }
  html[data-hadreen-workspace] #req-pending-list { grid-template-columns:1fr; }
  html[data-hadreen-workspace] .grid.g4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hx-section-tabs { flex-wrap:nowrap; overflow-x:auto; }
  .hx-section-tabs button { white-space:nowrap; }
  html[data-hadreen-workspace] .pay-rail { gap:3px; }
  .hx-pay-tools { width:100%; margin:6px 0 0; font-size:16px; }
  html[data-hadreen-workspace] .pay-nav { padding:9px; font-size:12px; }
  .hx-header { padding-inline:18px; gap:13px; }
  .hx-tenant-logo { width:40px; height:40px; }
  .hx-header-search { width:38px; padding:0; justify-content:center; margin-inline-start:auto; }
  .hx-header-search span,.hx-header-search kbd,.hx-account-name,.hx-app-toggle span { display:none; }
  .hx-header-actions { margin:0; } .hx-app-toggle { padding:9px 3px; }
  .hx-nav-item { padding-inline:14px; } .hx-nav-item .hx-icon { display:none; }
  .hx-global-nav { padding-inline:8px; } .hx-nav-item.hx-nav-settings { margin-inline-start:0; }
  .hx-context-nav { padding-inline:22px; gap:23px; }
  html[data-hadreen-workspace] .page { padding:23px 22px 40px; }
  .hx-home-heading { margin-bottom:23px; } .hx-home-heading h1 { font-size:26px; }
  .hx-date { display:none; } .hx-hero-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .hx-apps-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hx-lower-grid { grid-template-columns:1fr; gap:18px; }
  .hx-app-card p { font-size:11px; }
  html[data-hadreen-workspace] .g2,html[data-hadreen-workspace] .g3,html[data-hadreen-workspace] .g21,html[data-hadreen-workspace] .g12,html[data-hadreen-workspace] .g3-2 { grid-template-columns:1fr; }
  html[data-hadreen-workspace] .kpi-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-hadreen-workspace] .info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hx-login-story { display:none; } html[data-hadreen-workspace] #login-screen { padding:22px; }
  .hx-overlay { padding-top:75px; } .hx-launcher { max-height:calc(100dvh - 100px); }
  .hx-branding-grid { grid-template-columns:1fr; }
  .hx-branding-preview-block { grid-column:1; grid-row:auto; }
}
@media(max-width:480px) {
  .hx-header-search { display:none; }
  .hx-header .hx-header-icon { width:40px; min-width:40px; height:44px; }
  .hx-header .hx-app-toggle { min-width:44px; min-height:44px; }
  .hx-header-actions { margin-inline-start:auto; }
  .hx-header .hx-app-toggle > .hx-icon:last-child { display:none; }
  .hx-login-controls button { min-height:44px; }
  html[data-hadreen-workspace] .grid.g4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hx-header { gap:9px; padding-inline:13px; height:58px; }
  .hx-tenant-logo { width:38px; height:38px; padding:5px; }
  .hx-brand { font-size:18px; gap:7px; } .hx-mark { transform:scale(.8) skewY(-10deg); width:26px; }
  .hx-header-divider,.hx-account-name,.hx-header-help { display:none; }
  .hx-header-actions { gap:0; } .hx-header-icon { min-width:33px; } .hx-account { margin-inline-start:3px; }
  .hx-account .hx-icon { display:none; }
  html[data-hadreen-workspace] .app { height:calc(100dvh - 58px); }
  .hx-global-nav { height:48px; } .hx-nav-item { font-size:12px; padding-inline:12px; }
  #hx-home { padding:25px 17px 30px; } .hx-home-heading h1 { font-size:24px; }
  .hx-home-heading p { max-width:240px; font-size:12px; }
  .hx-hero-grid { margin-bottom:27px; } .hx-stat { padding:16px; min-height:124px; }
  .hx-stat-value { font-size:26px; } .hx-stat-top { font-size:11px; } .hx-stat-footer { font-size:10px; }
  .hx-apps-grid { gap:10px; } .hx-app-card { flex-direction:column; align-items:flex-start; padding:17px; gap:12px; }
  .hx-app-card p { font-size:10px; } .hx-app-card .hx-tile { width:40px; height:40px; }
  .hx-card-head { padding:18px; } .hx-task { padding:16px; gap:10px; } .hx-task-copy strong { font-size:12px; }
  .hx-status { font-size:9px; padding:4px 6px; } .hx-task>.hx-icon { display:none; }
  .hx-launcher-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hx-launcher-body { padding:16px; } .hx-launcher-head { padding:14px 16px; }
  .hx-launcher-head input { font-size:16px; } .hx-overlay { padding-inline:12px; }
  .hx-people-card-grid { grid-template-columns:1fr; }
  html[data-hadreen-workspace] .page { padding:20px 15px 35px; }
  html[data-hadreen-workspace] .panel { padding:16px; }
  html[data-hadreen-workspace] .kcard { padding:16px; gap:11px; }
  html[data-hadreen-workspace] .kcard-icon-wrap { display:none; }
  html[data-hadreen-workspace] .kcard-val { font-size:25px; }
  html[data-hadreen-workspace] .kcard-label { font-size:12px; }
  html[data-hadreen-workspace] .greeting-left h2,html[data-hadreen-workspace] .greeting-left h2 span { font-size:23px; }
  html[data-hadreen-workspace] .form-row,html[data-hadreen-workspace] .info-grid { grid-template-columns:1fr; }
  html[data-hadreen-workspace] :is(.form-input,.form-select,.form-textarea,.search-input,.sel) { font-size:16px!important; max-width:100%; }
  html[data-hadreen-workspace] .modal-box { padding:23px 19px; max-height:90dvh; }
  html[data-hadreen-workspace] .login-wrap { width:100%; padding:27px; }
  html[data-hadreen-workspace] .btn { min-height:42px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:360px) { .hx-header .hx-brand > span:last-child { display:none; } .hx-header .hx-header-icon { width:44px; min-width:44px; } }
@media print {
  .hx-header,.hx-global-nav,.hx-context-nav,.hx-breadcrumb,.hx-overlay,.hx-menu,.hx-skip { display:none!important; }
  html[data-hadreen-workspace] .app { height:auto; }
  .hx-table-scroll { overflow:visible; }
  html[data-hadreen-workspace] { --surface:#fff; --bg:#fff; --text:#101827; --text2:#526279; --text3:#64748B; --border:#E5EAF2; }
}

/* Compatibility with the September build. Native data, gates, alerts and forms stay intact. */
html[data-hadreen-workspace="3"] {
  --hx-font:'Instrument Sans','Cairo',sans-serif; --pri:var(--hx-action); --pri-hover:var(--hx-navy);
  --pri-ink:var(--mint); --pri-tint:var(--hx-tint); --pri-border:var(--border2); --pri-ring:color-mix(in srgb,var(--mint) 15%,transparent);
  --row-hover:var(--surface2); --mint2:var(--teal2); --info:var(--mint); --sem-legal:var(--coral);
  --icon-default:var(--text2); --icon-gold:var(--gold); --gold-ink:var(--gold); --gold-bg:var(--hx-warning-bg); --font-sans:var(--hx-font);
}
html[data-hadreen-workspace="3"][lang="ar"] { --hx-font:'Cairo','Noto Kufi Arabic',sans-serif; }
html[data-hadreen-workspace="3"][data-workspace-theme="dark"] { --pri:#173B73; --pri-hover:#244C86; }
html[data-hadreen-workspace="3"] :is(h1,h2,h3,.page-title,.login-title,.panel-title,.modal-title,.kcard-num) { font-family:var(--hx-font); }
/* Fail open to the native UI if the adapter cannot initialize. */
html[data-hadreen-workspace="3"]:not([data-hx-ready]) .sidebar { display:flex!important; }
html[data-hadreen-workspace="3"]:not([data-hx-ready]) .main>.topbar { display:flex!important; }
html[data-hadreen-workspace="3"]:not([data-hx-ready]) .app { height:100dvh; }
html[data-hadreen-workspace="3"] body { margin:0; overflow:hidden; }
html[data-hadreen-workspace="3"] .app { height:calc(100dvh - 64px - var(--noserver-h, 0px)); min-height:0; padding-top:0; }
html[data-hadreen-workspace="3"]:not([data-hx-signed-in]) .app { height:100dvh; }
html[data-hadreen-workspace="3"] .main { width:100%; min-width:0; flex:1; display:flex; flex-direction:column; }
html[data-hadreen-workspace="3"] .page-area { min-height:0; flex:1; width:100%; overflow:auto; }
html[data-hadreen-workspace="3"] .page { width:100%; box-sizing:border-box; }
.hx-latest-header { height:64px; gap:16px; box-sizing:border-box; margin-top:var(--noserver-h, 0px); }
.hx-latest-header .hx-brand-word { display:inline!important; font-family:'Instrument Sans',sans-serif; font-size:25px; letter-spacing:-1.2px; font-weight:700; }
.hx-brand-word>span { color:var(--hx-gold); }
#hx-current-label { font-size:12px; color:#D8E2F3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.hx-latest-header .topbar-right { display:flex; align-items:center; flex-shrink:0; gap:8px; margin:0!important; }
.hx-latest-header .topbar-right .btn { border:0!important; background:transparent!important; color:#E8EDF7!important; min-height:40px; padding:8px!important; }
.hx-latest-header .topbar-icon-btn { width:40px; height:40px; background:transparent!important; color:#E8EDF7; border:0; }
.hx-latest-header .topbar-icon-btn:hover,.hx-latest-header .topbar-right .btn:hover,.hx-latest-header .topbar-user:hover { background:#ffffff14!important; }
.hx-latest-header .topbar-user { display:flex; gap:9px; padding:5px; border:0; border-radius:7px; margin:0; background:transparent!important; color:white; cursor:pointer; }
/* Keep the native profile image; a background shorthand would erase it. */
.hx-latest-header .topbar-av { background-color:var(--hx-gold-tint)!important; color:var(--hx-navy)!important; width:32px; height:32px; border-radius:50%; }
.hx-latest-header .topbar-uname { color:white; font-size:12px; }
.hx-latest-header .topbar-urole { color:#BECCE1; font-size:10px; }
.hx-latest-header #client-switcher-select { max-width:135px!important; }
.hx-latest-header #nav-mode-btn { display:none!important; }
.hx-latest-header #ms-header-btn { display:none!important; }
.hx-latest-header .hx-header-search { width:230px; flex:1; max-width:290px; margin-inline-start:auto; margin-inline-end:0; }
.hx-global-nav { height:auto; min-height:50px; flex-wrap:wrap; overflow:visible; padding-inline:22px; gap:0; }
.hx-global-nav .hx-nav-item { min-height:49px; padding-inline:13px; }
.hx-global-nav .hx-nav-item[aria-current="true"] { color:var(--mint); border-bottom-color:var(--hx-gold); background:var(--surface2); }
.hx-context-nav { min-height:46px; flex-wrap:wrap; overflow:visible; gap:4px 22px; padding-inline:35px; }
.hx-context-nav button { min-height:45px; font-size:12px; }
html[data-hadreen-workspace="3"] .role-menu { max-width:calc(100vw - 20px); max-height:calc(100dvh - 80px); overflow:auto; box-shadow:var(--shadow-lg); }
html[data-hadreen-workspace="3"] .role-menu-item { min-height:44px; }
html[data-hadreen-workspace="3"] .notif-panel { max-width:min(440px,calc(100vw - 20px)); max-height:calc(100dvh - 80px); }
/* App-first navigation, with all entitled modules visible together. */
.hx-app-dialog { color:var(--text); background:var(--bg); border:1px solid var(--border2); border-radius:18px; padding:0; width:min(1040px,calc(100vw - 48px)); max-height:calc(100dvh - 64px); margin:auto; box-shadow:0 24px 80px #061a3d44; overflow:auto; }
.hx-app-dialog::backdrop { background:#061A3D99; backdrop-filter:blur(5px); }
.hx-app-dialog-top { display:flex; gap:24px; align-items:flex-start; justify-content:space-between; padding:30px 36px 22px; }
.hx-app-dialog-top .hx-eyebrow { color:var(--gold); letter-spacing:2px; margin:0 0 8px; font-size:11px; }
.hx-app-dialog h2 { font-size:28px; font-weight:650; letter-spacing:-.7px; margin:0 0 8px; }
#hx-app-subtitle { margin:0; color:var(--text3); font-size:13px; }
.hx-app-dialog .hx-icon-button { min-width:44px; min-height:44px; }
.hx-app-search-field { display:flex; gap:12px; align-items:center; margin:0 36px 10px; background:var(--surface); border:1px solid var(--border2); border-radius:9px; padding:0 16px; min-height:49px; }
.hx-app-search-field>.hx-icon { color:var(--text3); width:18px; }
#hx-app-query { background:none; color:var(--text); border:0; min-width:0; width:100%; height:46px; font-size:14px; flex:1; }
#hx-app-count { font-size:11px; color:var(--text3); white-space:nowrap; }
#hx-app-results { padding:4px 36px 30px; }
.hx-launcher-section { margin-top:25px; }
.hx-launcher-section h3 { color:var(--text2); font-size:12px; font-weight:600; margin:0 0 12px; }
.hx-launcher-subgroup { margin:0 0 18px; }
.hx-launcher-subgroup h4 { margin:0 0 9px; font-size:12px; font-weight:650; color:var(--text); }
.hx-app-dialog .hx-launcher-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.hx-app-dialog .hx-app-card { padding:19px 12px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:10px; cursor:pointer; color:var(--text); min-height:116px; box-shadow:var(--shadow-sm); }
.hx-app-dialog .hx-app-card:hover { border-color:var(--hx-gold); background:var(--surface); transform:translateY(-2px); box-shadow:var(--shadow); }
.hx-app-dialog .hx-tile { display:grid; place-items:center; width:44px; height:44px; border-radius:11px; color:var(--mint); background:var(--hx-tint); }
.hx-app-dialog .hx-tile[data-tone="clock"],.hx-app-dialog .hx-tile[data-tone="shield"] { color:var(--green); background:var(--hx-success-bg); }
.hx-app-dialog .hx-tile[data-tone="wallet"],.hx-app-dialog .hx-tile[data-tone="inbox"] { color:var(--gold); background:var(--hx-warning-bg); }
.hx-app-name { font-size:12px; font-weight:550; line-height:1.65; overflow-wrap:anywhere; }
.hx-app-dialog .hx-launcher-foot { justify-content:space-between; padding:15px 36px; font-size:11px; }
.hx-admin-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; padding:9px; background:var(--surface); border:1px solid var(--border); border-radius:9px; }
.hx-admin-tabs button { min-height:40px; padding:9px 13px; border:0; border-radius:6px; background:none; color:var(--text2); cursor:pointer; font-size:12px; }
.hx-admin-tabs button[aria-current="page"] { background:var(--hx-tint); color:var(--mint); font-weight:650; }
.hx-branding-panel { margin-top:18px; padding:18px; border:1px solid var(--border); border-radius:10px; background:var(--surface2); }
.hx-branding-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.hx-branding-head h3 { margin:0; font-size:15px; font-weight:650; color:var(--text); }
.hx-branding-head p { margin:4px 0 0; font-size:12px; color:var(--text3); }
.hx-branding-grid { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:10px 18px; align-items:start; }
.hx-branding-grid > .form-label { grid-column:1; margin:0; }
.hx-branding-grid > #hx-branding-name { grid-column:1; }
.hx-branding-preview-block { grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column; gap:7px; }
.hx-branding-preview { height:84px; display:grid; place-items:center; border:1px dashed var(--border2); border-radius:8px; background:var(--surface); color:var(--text3); padding:10px; }
.hx-branding-preview img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.hx-branding-preview .hx-icon { width:32px; height:32px; }
.hx-branding-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.hx-branding-msg { grid-column:1 / -1; min-height:18px; margin:4px 0 0; font-size:12px; color:var(--text3); }
.hx-branding-msg[data-tone="warn"] { color:var(--yellow); }
.hx-branding-msg[data-tone="good"] { color:var(--green); }
/* Login remains the real account/activation flow; no demo-role shortcuts. */
html[data-hadreen-workspace="3"] #login-screen { gap:80px; padding-top:calc(30px + var(--noserver-h, 0px)); box-sizing:border-box; }
html[data-hadreen-workspace="3"] .login-logo-mark { display:flex; width:175px; height:auto; padding:0; background:none; border:0; box-shadow:none; }
html[data-hadreen-workspace="3"] .login-logo-mark img { display:block; width:100%; height:auto; max-height:85px; object-fit:contain; }
html[data-hadreen-workspace="3"] .login-wrap { max-width:100%; box-sizing:border-box; }
.hx-latest-login-controls { border-top:1px solid var(--border); padding-top:13px; margin-top:20px; justify-content:space-between; flex-wrap:wrap; gap:5px 15px; }
.hx-latest-login-controls button { min-height:44px; }
html[data-hadreen-workspace="3"] .login-hint { font-size:11px; }
html[data-hadreen-workspace="3"] #login-btn { background:var(--hx-gold)!important; color:var(--hx-deep)!important; }
html[data-hadreen-workspace="3"] #login-btn:hover { background:var(--hx-gold-deep)!important; }
html[data-hadreen-workspace="3"] #login-activate-link { min-height:44px; display:flex; align-items:center; justify-content:center; }
html[data-hadreen-workspace="3"] #pw-eye { min-width:36px; min-height:36px; display:grid; place-items:center; }
/* Native Settings includes 13 gated tabs and the Article 10 governance mount. */
html[data-hadreen-workspace="3"] #set-tabbar { display:flex; flex-wrap:wrap; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:9px; margin-bottom:22px; }
html[data-hadreen-workspace="3"] #set-tabbar button { min-height:40px; border-radius:6px; padding:9px 12px; font-size:12px; }
html[data-hadreen-workspace="3"] :is(.emp-card,.dir-card,.set-card,.task-card) { background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-sm); }
html[data-hadreen-workspace="3"] :is(.emp-card,.dir-card):hover { border-color:var(--border2); }
html[data-hadreen-workspace="3"] :is(.ad-shell,.gror-shell,.pay-main,.pay-content,.set-body) { min-width:0; }
html[data-hadreen-workspace="3"] :is(.ad-toolbar,.filter-row,.emp-toolbar,.dir-toolbar,.set-toolbar) { flex-wrap:wrap; gap:10px; }
html[data-hadreen-workspace="3"] input,html[data-hadreen-workspace="3"] select,html[data-hadreen-workspace="3"] textarea { max-width:100%; box-sizing:border-box; }
html[data-hadreen-workspace="3"] table { border-collapse:collapse; }
html[data-hadreen-workspace="3"] ::-webkit-scrollbar-thumb { background:var(--border2); border:2px solid var(--surface); border-radius:8px; }
html[data-hadreen-workspace="3"] :is(.tbl-wrap,.table-wrap,.table-scroll) { max-width:100%; overflow:auto; }
html[data-hadreen-workspace="3"] #emp-view-container { max-width:100%; overflow:auto; }
html[data-hadreen-workspace="3"] .greeting-left { min-width:0; }
html[data-hadreen-workspace="3"] :is(.greeting-strip,.panel-hdr) { flex-wrap:wrap; }
html[data-hadreen-workspace="3"] :is(.greeting-left h2,.panel-title,.modal-title) { overflow-wrap:anywhere; }
/* The native GRO tab used dark ink on the old mint accent. */
html[data-hadreen-workspace="3"] .gro-tab.active { background:var(--hx-tint); color:var(--mint); }

/* Attendance summaries are information cards, not decorative corner controls.
   Do not hide meaningful donut centres, status dots, toggles or timeline markers. */
html[data-hadreen-workspace="3"] :is(.att-k,.ad-k,.att-rep-card.active)::after { content:none; display:none; }
html[data-hadreen-workspace="3"] :is(.att-k,.ad-k) { min-width:0; }
html[data-hadreen-workspace="3"] :is(.att-k-top,.ad-k-top) { align-items:flex-start; }
html[data-hadreen-workspace="3"] :is(.att-k-ic,.ad-k-ic) { flex-shrink:0; }
html[data-hadreen-workspace="3"] :is(.att-k-lbl,.att-k-sub,.ad-k-lbl,.ad-k-sub) { overflow-wrap:anywhere; line-height:1.5; }
html[data-hadreen-workspace="3"] :is(.att-k-val,.ad-k-val) { overflow-wrap:anywhere; line-height:1.2; }

/* Org chart controls use the same readable states as the other workspace tabs. */
html[data-hadreen-workspace="3"] .oc-panel { padding:0; }
html[data-hadreen-workspace="3"] .oc-toolbar { gap:12px 18px; padding:16px; }
html[data-hadreen-workspace="3"] .oc-tb-group { flex-wrap:wrap; max-width:100%; }
html[data-hadreen-workspace="3"] .oc-seg-btn { min-height:38px; padding:8px 12px; font-size:12px; }
html[data-hadreen-workspace="3"] .oc-seg-btn.active,
html[data-hadreen-workspace="3"] .oc-toggle:is(.collapsed,:hover) {
  background:var(--hx-control-bg); color:var(--hx-control-ink); border-color:var(--hx-control-bg);
}
html[data-hadreen-workspace="3"] .oc-seg-btn.active:hover { background:var(--hx-control-hover); color:var(--hx-control-ink); }
html[data-hadreen-workspace="3"] :is(.oc-card,.oc-node.oc-vacant .oc-card,.oc-legend-pop) { background:var(--surface); border-color:var(--border2); }
html[data-hadreen-workspace="3"] :is(.oc-name,.oc-legend-pop .oc-legend-row) { color:var(--text); }
html[data-hadreen-workspace="3"] :is(.oc-title,.oc-opt,.oc-opt-k,.oc-legend-pop .oc-legend-title) { color:var(--text2); }
html[data-hadreen-workspace="3"] .oc-tag { background:var(--surface3); color:var(--text2); }
html[data-hadreen-workspace="3"] .oc-role-badge { background:var(--hx-tint)!important; color:var(--mint)!important; }
/* Stay inside the renderer's 224×168 detailed-card geometry, including its three
   optional, permission-filtered lines. Full labels remain in the native drawer. */
html[data-hadreen-workspace="3"] .oc-card.detailed .oc-card-top { padding:9px 10px 6px 12px; gap:8px; }
html[data-hadreen-workspace="3"] .oc-card.detailed .oc-av { width:36px; height:36px; }
html[data-hadreen-workspace="3"] .oc-card.detailed .oc-name { white-space:normal; overflow-wrap:anywhere; line-height:1.3; font-size:13px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
html[data-hadreen-workspace="3"] .oc-card.detailed .oc-title { font-size:11px; line-height:1.3; }
html[data-hadreen-workspace="3"] .oc-card.detailed .oc-card-meta { padding:0 10px 6px 12px; gap:4px; }
html[data-hadreen-workspace="3"] .oc-card.detailed :is(.oc-tag,.oc-role-badge) { font-size:9px; line-height:1.4; padding:2px 7px; }
html[data-hadreen-workspace="3"] .oc-card.detailed .oc-opts { padding:0 10px 8px 12px; gap:2px; }
html[data-hadreen-workspace="3"] .oc-card.detailed .oc-opt { font-size:10px; line-height:1.4; }
html[data-hadreen-workspace="3"] .oc-zoombar.hx-org-view-tools {
  position:static; margin-inline-start:auto; background:var(--surface); color:var(--text); box-shadow:none; backdrop-filter:none;
}
html[data-hadreen-workspace="3"] .hx-org-view-tools .oc-zb { min-width:38px; min-height:38px; color:var(--text); }
html[data-hadreen-workspace="3"] .hx-org-view-tools .oc-zb:last-child { width:auto; padding-inline:12px; font-size:12px; }
html[data-hadreen-workspace="3"] .oc-drawer { max-width:100%; }
@media(max-width:700px) {
  html[data-hadreen-workspace="3"] #page-attendance .ad-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-hadreen-workspace="3"] #page-attendance .att-kpis { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html[data-hadreen-workspace="3"] #page-orgchart .kpi-strip { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html[data-hadreen-workspace="3"] #page-orgchart .kcard { padding:14px; flex-direction:column; align-items:flex-start; gap:8px; }
  html[data-hadreen-workspace="3"] #page-orgchart .kcard-label { white-space:normal; line-height:1.5; }
  html[data-hadreen-workspace="3"] .oc-toolbar { padding:12px; }
  html[data-hadreen-workspace="3"] .oc-search-wrap { width:100%; }
  html[data-hadreen-workspace="3"] .oc-search { width:100%; max-width:none; }
  html[data-hadreen-workspace="3"] .oc-canvas { height:520px; }
}
@media(max-width:380px) {
  html[data-hadreen-workspace="3"] #page-attendance .ad-kpi-grid { grid-template-columns:minmax(0,1fr); }
  html[data-hadreen-workspace="3"] #page-attendance .att-kpis { grid-template-columns:minmax(0,1fr)!important; }
}

/* Shared filled controls: navy is a background, never the light-theme ink token. */
html[data-hadreen-workspace="3"] {
  --hx-control-bg:var(--hx-action); --hx-control-hover:#244C86; --hx-control-ink:#FFFFFF;
  --hx-disabled-bg:var(--surface3); --hx-disabled-ink:var(--text2);
}
html[data-hadreen-workspace="3"] :is(.dir-tab,.comp-tab) {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:9px 16px; border:1px solid var(--border2); border-radius:999px;
  background:var(--surface); color:var(--text2); font-size:13px; font-weight:600;
  line-height:1.4; text-align:center; white-space:normal;
}
html[data-hadreen-workspace="3"] :is(.dir-tab,.comp-tab):hover { background:var(--surface2); color:var(--text); }
html[data-hadreen-workspace="3"] :is(.dir-tab.active,.comp-tab.active,.dir-pg.on,.off-vbtn.active,.ad-btn-primary,.onb-step-badge) {
  background:var(--hx-control-bg); color:var(--hx-control-ink); border-color:var(--hx-control-bg);
}
html[data-hadreen-workspace="3"] :is(.dir-tab.active,.comp-tab.active,.dir-pg.on,.off-vbtn.active,.ad-btn-primary):hover {
  background:var(--hx-control-hover); color:var(--hx-control-ink); filter:none;
}
html[data-hadreen-workspace="3"] :is(.dir-tab,.comp-tab) .hx-icon { width:17px; height:17px; color:inherit; }
html[data-hadreen-workspace="3"] :is(.dir-tab.active,.comp-tab.active,.ad-btn-primary) svg { color:inherit; }

/* Filled actions must pair a stable brand background with its own ink token.
 * --mint/--blue become pale link colors in dark mode: they are not button fills.
 * These are native component families (including lazy-loaded modules), not a
 * blanket .active rule: outline tabs, gold CTAs and semantic statuses retain
 * their own treatments. No enabled/disabled state or native handler is changed. */
html[data-hadreen-workspace="3"] :is(
  .lve-req,.lc-tab.active,.cal-today2,.cal-seg-btn.active,.ss-btn.primary,.ss-chip.on,
  .mr-chip.on,.notif-tab-btn.active,.rev-pg.on,.scope-opt.on,.tweak-btn-mint,
  .nt-chan.active,.nt-langtab.active,.nt-btn.primary,.gd-tab-btn.active,.wf-tab.active,
  .set-tab.active,.lvpol-seg button.on,.be-pg.on,.ra-segbtn.on,.ra-btn.primary,
  .me-act-primary,.me-tl-actbtn.prim,.ps-cta,.authx-btn,.dsr-btn-primary,
  .wf-btn-primary,.rg-set-tab.on,.emp-pager-num.active,.gm-tab.active
) {
  background:var(--hx-control-bg); background-image:none; color:var(--hx-control-ink)!important;
  border-color:var(--hx-control-bg); text-shadow:none;
}
html[data-hadreen-workspace="3"] :is(
  .lve-req,.lc-tab.active,.cal-today2,.cal-seg-btn.active,.ss-btn.primary,.ss-chip.on,
  .mr-chip.on,.notif-tab-btn.active,.rev-pg.on,.scope-opt.on,.tweak-btn-mint,
  .nt-chan.active,.nt-langtab.active,.nt-btn.primary,.gd-tab-btn.active,.wf-tab.active,
  .set-tab.active,.lvpol-seg button.on,.be-pg.on,.ra-segbtn.on,.ra-btn.primary,
  .me-act-primary,.me-tl-actbtn.prim,.ps-cta,.authx-btn,.dsr-btn-primary,
  .wf-btn-primary,.rg-set-tab.on,.emp-pager-num.active,.gm-tab.active
):not(:disabled):not([aria-disabled="true"]):hover {
  background:var(--hx-control-hover); color:var(--hx-control-ink); filter:none;
}
html[data-hadreen-workspace="3"] :is(
  .lve-req,.lc-tab.active,.cal-today2,.cal-seg-btn.active,.ss-btn.primary,.ss-chip.on,
  .mr-chip.on,.notif-tab-btn.active,.rev-pg.on,.scope-opt.on,.tweak-btn-mint,
  .nt-chan.active,.nt-langtab.active,.nt-btn.primary,.gd-tab-btn.active,.wf-tab.active,
  .set-tab.active,.lvpol-seg button.on,.be-pg.on,.ra-segbtn.on,.ra-btn.primary,
  .me-act-primary,.me-tl-actbtn.prim,.ps-cta,.authx-btn,.dsr-btn-primary,
  .wf-btn-primary,.rg-set-tab.on,.emp-pager-num.active,.gm-tab.active
) :is(span,i,svg) { color:inherit; }
html[data-hadreen-workspace="3"] .lc-tab.active .lc-tab-ct { background:#ffffff24; color:#fff; }
html[data-hadreen-workspace="3"] .gm-tab.active { box-shadow:none; }
html[data-hadreen-workspace="3"] :is(.ss-chip.on,.mr-chip.on,.scope-opt.on):is(.u-textlink,:hover,:focus-visible) { text-decoration:none; color:var(--hx-control-ink)!important; }
html[data-hadreen-workspace="3"] #page-approvals .ap-tab.active .ap-tabcount,
html[data-hadreen-workspace="3"] :is(
  .rev-tab.on .rev-tab-n,.cal-ymini-d.today,.org-team-count,
  .wf-step.done .wf-step-num,.wf-step.active .wf-step-num,
  .nm-tpl .nm-tpl-lang,
  .ra-card h3 .step,.rc-step.on .rc-step-n,.att-field-selfie .liveness,
  .wf-rail-step.active .wf-rail-dot,.likert-fill.l5,.cal-hero-ic
) { background:var(--hx-control-bg); color:var(--hx-control-ink); }
html[data-hadreen-workspace="3"] #uifx-yes[style*="background:var(--mint)"],
html[data-hadreen-workspace="3"] #custom-role-panel button[style*="background:var(--mint"],
html[data-hadreen-workspace="3"] #rc-dash-payroll-inner [style*="background:var(--mint);color:"] {
  background:var(--hx-control-bg)!important; color:var(--hx-control-ink)!important;
}
/* Disabled is deliberately neutral and legible, not a faded enabled button.
 * Native disabled/aria-disabled attributes and event guards stay authoritative. */
html[data-hadreen-workspace="3"] :is(button:disabled,button[aria-disabled="true"],input[type="submit"]:disabled,input[type="button"]:disabled) {
  background:var(--hx-disabled-bg)!important; color:var(--hx-disabled-ink)!important;
  border-color:var(--border2)!important; opacity:1!important; filter:none!important;
  box-shadow:none!important; text-shadow:none!important; cursor:not-allowed!important;
}
html[data-hadreen-workspace="3"] :is(button:disabled,button[aria-disabled="true"]) :is(span,i,svg) { color:inherit!important; opacity:1!important; }
html[data-hadreen-workspace="3"] .ss-savebar { box-shadow:0 -3px 16px #061a3d12; flex-wrap:wrap; }
html[data-hadreen-workspace="3"][data-workspace-theme="dark"] .ss-savebar { box-shadow:0 -3px 16px #0003; }
html[data-hadreen-workspace="3"] .lve-init-admin { color:var(--mint); background:var(--hx-tint); border-color:var(--border2); }
html[data-hadreen-workspace="3"] .lve-init-self { color:var(--green); background:var(--hx-success-bg); border-color:var(--border2); }
html[data-hadreen-workspace="3"] .lve-init-hr { color:var(--purple); background:var(--surface); border-color:var(--border2); }
/* Related low-contrast labels found by the cross-role module audit. Decorative
 * chart-series dots keep their original colors; only selected-control ink/fill
 * is normalized. Category hues in report icons are darkened, not replaced. */
html[data-hadreen-workspace="3"] .mcc-tg.on { color:var(--mint)!important; background:var(--hx-tint)!important; border-color:var(--mint)!important; }
html[data-hadreen-workspace="3"][data-workspace-theme="light"] :is(.mr-count,.mr-tile-ic,.mr-recent-ic) { color:color-mix(in srgb,var(--tc) 50%,#101827); }
html[data-hadreen-workspace="3"][data-workspace-theme="dark"] :is(.mr-count,.mr-tile-ic,.mr-recent-ic) { color:color-mix(in srgb,var(--tc) 55%,#EDF2FA); }
html[data-hadreen-workspace="3"] :is(.xfb-expand,.seg-btn:not(.active),.ben-ref-d,.nm-tpl-edit,.lvc-scope-ro .chev,.gmt-coll-car) { color:var(--text2); }
html[data-hadreen-workspace="3"] #gro-mytasks-body .gmt-coll-car { color:var(--text2); }
html[data-hadreen-workspace="3"] :is(.ben-tab-badge,.rc-ct) { color:var(--text2); background:var(--surface3); }
html[data-hadreen-workspace="3"] .rc-railitem.gold { color:#82580D; }
html[data-hadreen-workspace="3"] .rc-railitem.gold.on .rc-ct { color:inherit; background:var(--hx-warning-bg); }
html[data-hadreen-workspace="3"][data-workspace-theme="dark"] .rc-railitem.gold { color:var(--yellow); }
html[data-hadreen-workspace="3"] .yvmd-abtn { color:var(--mint); background:var(--hx-tint); border-color:var(--border2); }
@media (max-width:600px) {
  html[data-hadreen-workspace="3"] .lc-tabs { max-width:100%; flex-wrap:wrap; }
  html[data-hadreen-workspace="3"] .lc-tab { justify-content:center; flex:1 1 auto; min-height:44px; }
  html[data-hadreen-workspace="3"] .lve-req { min-height:44px; }
  html[data-hadreen-workspace="3"] .ss-savebar .act { flex-wrap:wrap; }
  html[data-hadreen-workspace="3"] .lve-row { display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px 12px; }
  html[data-hadreen-workspace="3"] .lve-row :is(.lve-mn,.lve-chip,.lve-act) { grid-column:2; min-width:0; justify-self:start; }
  html[data-hadreen-workspace="3"] .lve-chip { white-space:normal; }
  html[data-hadreen-workspace="3"] .lve-note { max-width:100%; }
  html[data-hadreen-workspace="3"] :is(.cal-tb-left,.cal-seg,.ss-card-hd) { flex-wrap:wrap; }
  html[data-hadreen-workspace="3"] .cal-seg { max-width:100%; }
  html[data-hadreen-workspace="3"] .cal-seg-btn { flex:1 1 75px; min-height:44px; }
  html[data-hadreen-workspace="3"] .ss-card-tx { flex:1 1 120px; min-width:0; }
  html[data-hadreen-workspace="3"] .ss-gov-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
}

/* The legacy link stamper gives TDs inline-block; restore the native table grid. */
html[data-hadreen-workspace="3"] :is(td,th).u-textlink { display:table-cell; }
html[data-hadreen-workspace="3"] :is(.u-textlink,.page a[href],.panel a[href]) {
  text-decoration:none; transform:none; color:var(--mint); text-shadow:none;
}
html[data-hadreen-workspace="3"] :is(.u-textlink,.page a[href],.panel a[href]):is(:hover,:focus-visible) {
  text-decoration:underline solid; text-decoration-thickness:1px; text-underline-offset:.22em; transform:none;
}
html[data-hadreen-workspace="3"] #emp-view-container table.tbl :is(th,td) {
  text-align:start; padding-inline:16px; vertical-align:middle;
}
html[data-hadreen-workspace="3"][dir="rtl"] #emp-view-container table.tbl :is(th,td) { text-align:right; }
html[data-hadreen-workspace="3"] #emp-view-container table.tbl td>div { justify-content:flex-start; }
html[data-hadreen-workspace="3"] #emp-view-container table.tbl :is(th,td):nth-child(2) { min-width:230px; }
html[data-hadreen-workspace="3"] #emp-view-container table.tbl :is(th,td):nth-child(3) { min-width:160px; }
html[data-hadreen-workspace="3"] .emp-dept-pill {
  display:inline-block; border:0; border-radius:999px; padding:5px 11px;
  background:var(--hx-tint)!important; color:var(--mint)!important;
  font-size:12px; font-weight:550; line-height:1.5; text-shadow:none; white-space:normal;
}
html[data-hadreen-workspace="3"] .hx-employee-name { display:inline-flex; align-items:flex-start; gap:8px; max-width:100%; vertical-align:middle; }
html[data-hadreen-workspace="3"] .hx-employee-flag {
  display:inline-block; flex:0 0 24px; width:24px; min-width:24px; line-height:1.4; font-size:16px;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; white-space:nowrap;
}
html[data-hadreen-workspace="3"] .hx-employee-label { min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.5; }
html[data-hadreen-workspace="3"] .dir-tbl .dir-c-employee .dir-name { max-width:none; overflow:visible; white-space:normal; }
html[data-hadreen-workspace="3"] .dir-av { flex-shrink:0; }

/* Fixed node space on wide screens; a readable vertical path on small screens. */
html[data-hadreen-workspace="3"] .onb-flow { gap:8px; max-width:100%; padding:12px 4px 16px; }
html[data-hadreen-workspace="3"] .onb-step { flex:1 0 110px; min-width:110px; max-width:180px; gap:9px; }
html[data-hadreen-workspace="3"] .onb-step-node { flex-shrink:0; width:48px; height:48px; background:var(--surface3); border-color:var(--border2); opacity:1; }
html[data-hadreen-workspace="3"] .onb-step.has .onb-step-node { background:var(--hx-tint); border-color:var(--mint); }
html[data-hadreen-workspace="3"] .onb-step-lbl { max-width:none; width:100%; font-size:12px; line-height:1.5; min-height:36px; color:var(--text2); overflow-wrap:anywhere; }
html[data-hadreen-workspace="3"] .onb-step-cnt { color:var(--text2); font-size:11px; line-height:1.5; }
html[data-hadreen-workspace="3"] .onb-conn { flex:0 0 20px; min-width:20px; margin-top:24px; background:var(--border2); }
html[data-hadreen-workspace="3"] .off-step-closed .onb-step-node { opacity:1; }
html[data-hadreen-workspace="3"] .off-step-closed .onb-step-badge { background:var(--text2); color:var(--surface); }
html[data-hadreen-workspace="3"] :is(#page-onboarding,#page-offboarding) .kcard-label {
  white-space:normal; overflow:visible; text-overflow:clip; line-height:1.5;
}

/* Keep both the alert title and explanation readable; status has its own column. */
html[data-hadreen-workspace="3"] .ad-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
html[data-hadreen-workspace="3"] .ad-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:4px 10px; padding:10px; }
html[data-hadreen-workspace="3"] :is(.ad-row-a,.ad-row-b) {
  max-width:none; min-width:0; overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; line-height:1.5;
}
html[data-hadreen-workspace="3"] .ad-row-a { grid-column:1; grid-row:1; }
html[data-hadreen-workspace="3"] .ad-row-b { grid-column:1; grid-row:2; }
html[data-hadreen-workspace="3"] .ad-row-b:empty { display:none; }
html[data-hadreen-workspace="3"] .ad-row>.ad-chip { grid-column:2; grid-row:1 / span 2; align-self:start; }
html[data-hadreen-workspace="3"] .ad-card-top { flex-wrap:wrap; }
html[data-hadreen-workspace="3"] .ad-q { flex:1; min-width:120px; }
html[data-hadreen-workspace="3"] .ad-answer { flex-wrap:wrap; line-height:1.5; }
html[data-hadreen-workspace="3"] .ad-meta-v { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
html[data-hadreen-workspace="3"] .ad-btn { min-height:40px; height:auto; padding:9px 14px; border-radius:7px; white-space:normal; line-height:1.5; text-align:start; }
@media(max-width:600px) {
  /* Offboarding defines six columns inline; keep its summaries readable on phones. */
  html[data-hadreen-workspace="3"] :is(#page-onboarding,#page-offboarding) .kpi-strip { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px; }
  html[data-hadreen-workspace="3"] :is(#page-onboarding,#page-offboarding) .kcard { flex-direction:column; align-items:flex-start; padding:14px; gap:10px; }
  html[data-hadreen-workspace="3"] :is(#page-onboarding,#page-offboarding) .kcard-body { width:100%; }
  html[data-hadreen-workspace="3"] :is(#page-onboarding,#page-offboarding) .kcard-val { font-size:22px; line-height:1.3; overflow-wrap:anywhere; }
  html[data-hadreen-workspace="3"] .onb-flow { flex-direction:column; gap:0; overflow:visible; }
  html[data-hadreen-workspace="3"] .onb-step { display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto auto; column-gap:16px; row-gap:2px; text-align:start; flex:none; width:100%; max-width:none; min-width:0; }
  html[data-hadreen-workspace="3"] .onb-step-node { grid-column:1; grid-row:1 / span 2; }
  html[data-hadreen-workspace="3"] .onb-step-lbl { grid-column:2; min-height:0; align-self:end; }
  html[data-hadreen-workspace="3"] .onb-step-cnt { grid-column:2; align-self:start; }
  html[data-hadreen-workspace="3"] .onb-conn { flex:none; width:2px; min-width:2px; height:18px; margin:5px 0; margin-inline-start:23px; }
}
@media(max-width:1200px) {
  #hx-current-label { display:none; }
  .hx-latest-header { gap:12px; padding-inline:20px; }
  .hx-latest-header .hx-header-search { max-width:220px; }
  .hx-latest-header .topbar-uname { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media(max-width:900px) {
  .hx-latest-header .topbar-user>div:not(.topbar-av) { display:none; }
  .hx-latest-header .hx-header-search { width:42px; max-width:42px; flex:none; padding:0; justify-content:center; }
  .hx-latest-header .hx-header-search span,.hx-latest-header .hx-header-search kbd { display:none; }
  .hx-global-nav { padding:0 10px; flex-wrap:nowrap; overflow:auto; }
  .hx-context-nav { padding:0 23px; flex-wrap:nowrap; overflow:auto; }
  .hx-global-nav .hx-nav-item { flex-shrink:0; }
  .hx-context-nav button { flex-shrink:0; white-space:nowrap; }
  .hx-app-dialog .hx-launcher-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  html[data-hadreen-workspace="3"] #login-screen { gap:30px; }
  .hx-login-story { max-width:280px; }
  .hx-latest-header:has(#client-switcher) { height:104px; padding-bottom:40px; position:relative; }
  .hx-latest-header #client-switcher-host:not(:empty) { position:absolute; inset-inline:20px; bottom:6px; }
  .hx-latest-header #client-switcher { width:max-content; max-width:100%; }
  html[data-hadreen-workspace="3"][data-hx-signed-in]:has(#client-switcher) .app { height:calc(100dvh - 104px - var(--noserver-h, 0px)); }
}
@media(max-width:600px) {
  .hx-latest-header { padding-inline:12px; gap:8px; }
  .hx-latest-header .hx-brand-word { font-size:22px; }
  .hx-latest-header .hx-header-divider,.hx-latest-header #ms-header-btn,.hx-latest-header .hx-header-search { display:none; }
  .hx-latest-header .topbar-right { margin-inline-start:auto!important; gap:2px; }
  .hx-latest-header .topbar-right .btn { min-width:38px; width:auto; overflow:hidden; font-size:0!important; gap:0!important; }
  .hx-latest-header #rtl-btn svg { width:18px; height:18px; }
  .hx-latest-header .topbar-icon-btn { width:38px; height:44px; }
  .hx-latest-header .topbar-user { min-height:44px; padding:3px; }
  .hx-latest-header .hx-app-toggle { min-height:44px; min-width:38px; justify-content:center; }
  .hx-app-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 24px); border-radius:13px; }
  .hx-app-dialog-top { padding:23px 20px 18px; }
  .hx-app-dialog h2 { font-size:25px; }
  .hx-app-search-field { margin-inline:20px; padding-inline:12px; }
  #hx-app-query { font-size:16px; }
  #hx-app-count { display:none; }
  #hx-app-results { padding-inline:20px; }
  .hx-app-dialog .hx-launcher-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
  .hx-app-dialog .hx-app-card { min-height:112px; padding:15px 8px; }
  .hx-app-name { font-size:11px; }
  .hx-app-dialog .hx-launcher-foot { padding-inline:20px; }
  html[data-hadreen-workspace="3"] .grid { grid-template-columns:minmax(0,1fr); }
  html[data-hadreen-workspace="3"] .kpi-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-hadreen-workspace="3"] .page :is(.filter-row,.greeting-right) { width:100%; }
  html[data-hadreen-workspace="3"] :is(.emp-toolbar,.dir-toolbar,.ad-toolbar) > * { min-width:0; max-width:100%; }
  html[data-hadreen-workspace="3"] #set-tabbar { max-width:100%; }
}
@media(max-width:360px) {
  .hx-latest-header .hx-brand-word { font-size:18px; }
  .hx-latest-header { gap:4px; padding-inline:9px; }
  .hx-latest-header .topbar-av { width:28px; height:28px; }
  .hx-app-dialog .hx-launcher-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Keep account/theme/language controls reachable at narrow phone widths. */
@media(max-width:380px) {
  .hx-latest-header { height:108px; flex-wrap:wrap; align-content:center; row-gap:2px; }
  .hx-latest-header .topbar-right { width:100%; justify-content:flex-end; min-height:44px; }
  html[data-hadreen-workspace="3"][data-hx-signed-in] .app { height:calc(100dvh - 108px - var(--noserver-h, 0px)); }
  .hx-latest-header:has(#client-switcher) { height:148px; }
  html[data-hadreen-workspace="3"][data-hx-signed-in]:has(#client-switcher) .app { height:calc(100dvh - 148px - var(--noserver-h, 0px)); }
}
@media print {
  .hx-latest-header,.hx-app-dialog,.hx-latest-login-controls { display:none!important; }
  html[data-hadreen-workspace="3"] body { overflow:visible; }
  html[data-hadreen-workspace="3"] .app,html[data-hadreen-workspace="3"] .page-area { height:auto; overflow:visible; }
}
/* Lifecycle task cards — a shared, readable checklist in both brand themes.
 * Scoped to the native selected-case checklists, never the workflow/kanban. */
html[data-hadreen-workspace="3"] .hx-lifecycle { --hx-task-warning:#82580D; }
html[data-hadreen-workspace="3"][data-workspace-theme="dark"] .hx-lifecycle { --hx-task-warning:var(--yellow); }
html[data-hadreen-workspace="3"] .hx-lifecycle .onb-owner-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));
  align-items:start; gap:20px; min-width:0;
}
html[data-hadreen-workspace="3"] .hx-lifecycle .onb-owner {
  container-type:inline-size; min-width:0; padding:22px;
  background:var(--surface); border:1px solid var(--border2); border-radius:16px;
  box-shadow:var(--shadow-sm);
}
html[data-hadreen-workspace="3"] .hx-lifecycle .onb-owner-hdr { gap:14px; margin-bottom:20px; align-items:center; }
html[data-hadreen-workspace="3"] .hx-lifecycle .onb-owner-ic {
  width:46px; height:46px; border-radius:12px; background:var(--hx-action)!important;
  color:#fff!important; box-shadow:inset 0 -3px 0 var(--hx-gold);
}
html[data-hadreen-workspace="3"] .hx-lifecycle .onb-owner-ic .hx-icon { width:23px; height:23px; }
html[data-hadreen-workspace="3"] .hx-lifecycle .onb-owner-name { min-width:0; font-size:16px; font-weight:650; line-height:1.5; color:var(--text); overflow-wrap:anywhere; }
html[data-hadreen-workspace="3"] .hx-lifecycle .onb-owner-cnt {
  flex-shrink:0; min-width:62px; padding:6px 12px; border:0; border-radius:12px;
  background:var(--surface3); color:var(--text2); font-size:16px; font-weight:650; text-align:center;
  line-height:1.4; font-variant-numeric:tabular-nums;
}
html[data-hadreen-workspace="3"] .hx-lifecycle .onb-owner-cnt::after { content:attr(data-hx-caption); display:block; font-size:10px; font-weight:500; }
html[data-hadreen-workspace="3"] .hx-lifecycle .checklist { gap:10px; }
html[data-hadreen-workspace="3"] .hx-lifecycle .check-row {
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:14px;
  min-width:0; min-height:78px; padding:14px 16px; border:1px solid var(--border2);
  border-radius:13px; background:var(--surface); color:var(--text); text-align:start;
}
html[data-hadreen-workspace="3"] .hx-lifecycle .check-box {
  display:flex; align-items:center; justify-content:center; padding:0; text-align:center; text-decoration:none;
  width:44px; height:44px; box-sizing:border-box; border-radius:50%;
  border:1.5px solid var(--hx-action); background:var(--hx-action); color:#fff;
  font-size:23px; line-height:1; cursor:pointer; transition:box-shadow .15s;
}
html[data-hadreen-workspace="3"] .hx-lifecycle .check-box:not(.done)::after { content:""; width:14px; height:14px; border:2px solid currentColor; border-radius:4px; }
html[data-hadreen-workspace="3"] .hx-lifecycle .check-box.done { background:var(--surface); border-color:var(--border2); color:var(--mint); }
html[data-hadreen-workspace="3"] .hx-lifecycle .check-box .hx-icon { width:24px; height:24px; stroke-width:2.5; color:inherit; }
html[data-hadreen-workspace="3"] .hx-lifecycle .check-box:hover { box-shadow:0 0 0 4px var(--hx-tint); text-decoration:none; }
html[data-hadreen-workspace="3"] .hx-lifecycle .hx-task-content { display:flex; flex-wrap:wrap; align-items:center; min-width:0; gap:8px; }
html[data-hadreen-workspace="3"] .hx-lifecycle .check-label { flex:1 0 100%; min-width:0; font-size:14px; font-weight:550; line-height:1.6; color:var(--text); overflow-wrap:anywhere; }
html[data-hadreen-workspace="3"] .hx-lifecycle .check-row.done .check-label { color:var(--text2); text-decoration:none; }
html[data-hadreen-workspace="3"] .hx-lifecycle .onb-task-st {
  margin-inline-start:0; max-width:120px; padding:6px 12px; border:0; border-radius:999px;
  font-size:12px; font-weight:650; line-height:1.5; text-align:center; white-space:normal; overflow-wrap:anywhere;
}
html[data-hadreen-workspace="3"] .hx-lifecycle .onb-task-st.kpill-mint { background:var(--hx-success-bg); color:var(--green); }
html[data-hadreen-workspace="3"] .hx-lifecycle .onb-task-st.kpill-blue { background:var(--hx-tint); color:var(--mint); }
html[data-hadreen-workspace="3"] .hx-lifecycle .onb-task-st.kpill-yell { background:var(--hx-warning-bg); color:var(--hx-task-warning); }
html[data-hadreen-workspace="3"] .hx-lifecycle .onb-task-st.kpill-coral { background:var(--hx-danger-bg); color:var(--coral); }
html[data-hadreen-workspace="3"] .hx-lifecycle .off-gro-link {
  min-height:36px; padding:6px 10px; border:1px solid var(--border2); border-radius:8px;
  color:var(--mint); background:var(--hx-tint); font-size:11px; line-height:1.5;
}
html[data-hadreen-workspace="3"] .hx-lifecycle .off-gro-link:hover { border-color:var(--mint); }
html[data-hadreen-workspace="3"] .hx-lifecycle .onb-task-prob { color:var(--text2); background:var(--surface3); font-size:11px; line-height:1.5; padding:4px 8px; border-radius:6px; white-space:normal; }
html[data-hadreen-workspace="3"] .hx-lifecycle .off-check-layout { grid-template-columns:minmax(0,1fr) minmax(250px,300px); gap:20px; }
html[data-hadreen-workspace="3"] .hx-lifecycle .off-docpack { min-width:0; padding:20px; background:var(--surface2); border-radius:14px; }
html[data-hadreen-workspace="3"] .hx-lifecycle .off-docpack-hdr { flex-wrap:wrap; font-size:14px; line-height:1.5; }
html[data-hadreen-workspace="3"] .hx-lifecycle .off-doc-row { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:8px; padding-block:12px; opacity:1; }
html[data-hadreen-workspace="3"] .hx-lifecycle .off-doc-name { font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
html[data-hadreen-workspace="3"] .hx-lifecycle .off-doc-st { font-size:11px; }
html[data-hadreen-workspace="3"] .hx-lifecycle .off-doc-row.miss :is(.off-doc-name,.off-doc-st) { color:var(--text2); }
@container (max-width:460px) {
  html[data-hadreen-workspace="3"] .hx-lifecycle .check-row { grid-template-columns:44px minmax(0,1fr); gap:8px 12px; padding:14px 12px; }
  html[data-hadreen-workspace="3"] .hx-lifecycle .check-box { grid-column:1; grid-row:1 / span 2; align-self:start; }
  html[data-hadreen-workspace="3"] .hx-lifecycle .hx-task-content { grid-column:2; }
  html[data-hadreen-workspace="3"] .hx-lifecycle .onb-task-st { grid-column:2; justify-self:start; max-width:100%; }
}
@media (max-width:1100px) {
  html[data-hadreen-workspace="3"] .hx-lifecycle .off-check-layout { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px) {
  html[data-hadreen-workspace="3"] .hx-lifecycle .onb-owner { padding:14px; border-radius:13px; }
  html[data-hadreen-workspace="3"] .hx-lifecycle .onb-owner-hdr { gap:10px; margin-bottom:16px; }
  html[data-hadreen-workspace="3"] .hx-lifecycle .onb-owner-ic { width:40px; height:40px; border-radius:10px; }
  html[data-hadreen-workspace="3"] .hx-lifecycle .onb-owner-name { font-size:14px; }
  html[data-hadreen-workspace="3"] .hx-lifecycle .onb-owner-cnt { min-width:50px; padding:5px 8px; font-size:14px; }
  html[data-hadreen-workspace="3"] .hx-lifecycle .off-gro-link { min-height:44px; }
}