.hr-page {
  --hr-blue: #1769e8;
  --hr-blue-dark: #0f56c8;
  --hr-ink: #13213d;
  --hr-muted: #69768e;
  --hr-line: #e2e8f1;
  --hr-surface: #ffffff;
  box-sizing: border-box;
  min-height: 100%;
  padding: 24px max(23px, calc((100% - 1480px) / 2)) 32px;
  color: var(--hr-ink);
  background:
    radial-gradient(circle at 75% -15%, rgba(210, 227, 255, .24), transparent 30%),
    #f8fafd;
}

.hr-page *, .hr-page *::before, .hr-page *::after { box-sizing: border-box; }
.hr-icon { width: 19px; height: 19px; display: block; flex: 0 0 auto; }
.hr-heading { display: flex; align-items: center; justify-content: space-between; min-height: 54px; gap: 24px; }
.hr-heading h1 { margin: 0 0 4px; font-size: clamp(25px, 2vw, 31px); line-height: 1.08; letter-spacing: -.65px; color: #101d38; }
.hr-heading p { margin: 0; color: #5f6f8d; font-size: 12px; }
.hr-heading__actions { display: flex; align-items: center; gap: 12px; }
.hr-page .hr-btn { min-height: 40px; padding: 0 22px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 12px; font-weight: 700; box-shadow: none; transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.hr-btn--outline { border: 1px solid #1769e8; color: #155dcc; background: #fff; }
.hr-btn--primary { border: 1px solid #1769e8; color: #fff; background: linear-gradient(135deg, #1769e8, #1059cb); box-shadow: 0 6px 13px rgba(20, 94, 210, .17) !important; }
.hr-btn--outline:hover { background: #f4f8ff; }
.hr-btn--primary:hover { background: #0f58cc; }
.hr-heading__actions .hr-icon { width: 18px; height: 18px; }

.hr-tabs { display: flex; align-items: end; gap: 2px; margin: 13px 0 15px; overflow-x: auto; border-bottom: 1px solid #dce4ef; scrollbar-width: thin; }
.hr-tabs button { min-height: 46px; padding: 0 16px 11px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-bottom: 2px solid transparent; border-radius: 9px 9px 0 0; color: #53617d; background: transparent; white-space: nowrap; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.hr-tabs button .hr-icon { width: 15px; height: 15px; stroke-width: 1.7; }
.hr-tabs button:hover { color: var(--hr-blue); background: rgba(235, 243, 255, .58); }
.hr-tabs button.is-active { color: var(--hr-blue); border-bottom-color: var(--hr-blue); background: #f1f6ff; }
.hr-tabs button:focus-visible, .hr-page button:focus-visible, .hr-page input:focus-visible, .hr-page select:focus-visible, .hr-page textarea:focus-visible { outline: 2px solid rgba(23, 105, 232, .36); outline-offset: 2px; }

.hr-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; margin-bottom: 13px; }
.hr-kpi, .hr-card { border: 1px solid #e2e8f1; background: var(--hr-surface); box-shadow: 0 4px 13px rgba(32, 54, 87, .06); }
.hr-kpi { min-width: 0; min-height: 88px; padding: 12px 13px; border-radius: 10px; display: flex; align-items: center; gap: 11px; }
.hr-kpi__icon { width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.hr-kpi__icon .hr-icon { width: 23px; height: 23px; stroke-width: 1.8; }
.hr-kpi__copy { min-width: 0; }
.hr-kpi__copy small, .hr-kpi__copy > span { display: block; color: #68758b; font-size: 9px; line-height: 1.3; }
.hr-kpi strong { display: block; max-width: 100%; margin: 3px 0 4px; color: #14213d; font-size: clamp(14px, 1.25vw, 18px); line-height: 1.08; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-kpi .hr-positive { color: #1e9d55; }
.hr-tone--blue { color: #1769e8 !important; background: #edf4ff; }
.hr-tone--green { color: #20a354 !important; background: #eaf8ef; }
.hr-tone--violet { color: #763ddd !important; background: #f1eaff; }
.hr-tone--orange { color: #ed8a18 !important; background: #fff3e5; }
.hr-tone--red { color: #db3152 !important; background: #ffedf1; }

.hr-dashboard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 154px 154px 178px; grid-template-areas: "quick quick employees employees employees employees employees employees summary summary summary summary" "quick quick employees employees employees employees employees employees time time time time" "mini mini mini mini pipeline pipeline pipeline pipeline alerts alerts alerts alerts"; gap: 12px; }
.hr-card { min-width: 0; overflow: hidden; border-radius: 10px; }
.hr-card > header, .hr-card > h2 { min-height: 41px; margin: 0; padding: 0 13px; border-bottom: 1px solid #e6ebf2; display: flex; align-items: center; justify-content: space-between; }
.hr-card h2 { color: #14213a; font-size: 13px; line-height: 1.25; }
.hr-card header button { padding: 3px 0; border: 0; color: #075bd8; background: none; font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }
.hr-quick { grid-area: quick; }
.hr-employees-card { grid-area: employees; display: flex; flex-direction: column; }
.hr-summary { grid-area: summary; }
.hr-time { grid-area: time; }
.hr-mini { grid-area: mini; }
.hr-pipeline { grid-area: pipeline; }
.hr-alerts { grid-area: alerts; }

.hr-quick > h2 { border-bottom: 0; min-height: 38px; }
.hr-quick__action { width: calc(100% - 18px); min-height: 36px; margin: 0 9px 7px; padding: 0 9px; border: 1px solid currentColor; border-radius: 7px; display: flex; align-items: center; gap: 9px; background: #f9fbff; font: inherit; font-size: 9px; font-weight: 700; text-align: left; cursor: pointer; }
.hr-quick__action > .hr-icon { width: 18px; height: 18px; }
.hr-quick__action span { flex: 1; }
.hr-quick__chevron { width: 12px !important; height: 12px !important; }
.hr-quick__action--blue { color: #1769e8; border-color: #dbe8fd; background: #f7faff; }
.hr-quick__action--green { color: #229c57; border-color: #d9f0e1; background: #f7fcf9; }
.hr-quick__action--violet { color: #7340d5; border-color: #eadffc; background: #fbf9ff; }
.hr-quick__action--orange { color: #e98012; border-color: #fae5cc; background: #fffbf6; }
.hr-quick__action--indigo { color: #3568dc; border-color: #dce6fb; background: #f8faff; }
.hr-quick__action--cyan { color: #1195b1; border-color: #d6eef3; background: #f7fcfd; }
.hr-quick__action:hover { filter: brightness(.985); transform: translateY(-1px); }

.hr-table-wrap { width: 100%; overflow: auto; }
.hr-page table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 8px; }
.hr-page th { color: #4f5f79; background: #fbfcfe; font-size: 7px; font-weight: 700; letter-spacing: .01em; text-align: left; text-transform: none; }
.hr-page th, .hr-page td { height: 34px; padding: 6px 9px; border-bottom: 1px solid #edf0f5; white-space: nowrap; }
.hr-page td { color: #40506b; }
.hr-page td small { display: block; margin-top: 2px; color: #7b879b; font-size: 7px; }
.hr-person { display: flex; align-items: center; gap: 7px; color: #26354f; }
.hr-person b { font-size: 8px; }
.hr-avatar { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; color: #196885; background: #dff3f8; font-size: 8px; font-weight: 700; }
.hr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hr-avatar--1 { color: #b06b08; background: #fff0cf; }
.hr-avatar--2 { color: #6c42bd; background: #eee6ff; }
.hr-avatar--3 { color: #1c7e49; background: #dcf5e7; }
.hr-avatar--4 { color: #b33d55; background: #ffe5eb; }
.hr-cell-primary { color: #40506b; font-size: 8px; font-weight: 500; }
.hr-row-menu { width: 23px; height: 23px; padding: 4px; border: 0; color: #4d5d75; background: transparent; cursor: pointer; }
.hr-row-menu .hr-icon { width: 14px; height: 14px; }
.hr-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; padding: 4px 6px; border-radius: 4px; color: #526078; background: #edf1f7; font-size: 7px; font-weight: 700; }
.hr-badge--active, .hr-badge--approved, .hr-badge--present, .hr-badge--completed, .hr-badge--filled { color: #178d47; background: #e7f6ec; }
.hr-badge--pending, .hr-badge--late, .hr-badge--vacation, .hr-badge--open, .hr-badge--paused, .hr-badge--draft { color: #b97006; background: #fff2dc; }
.hr-badge--rejected, .hr-badge--absent, .hr-badge--terminated, .hr-badge--closed { color: #be2943; background: #ffe8ec; }
.hr-employees-card > .hr-table-wrap { min-height: 0; flex: 1 1 auto; }
.hr-table-footer { width: 100%; min-height: 32px !important; margin-top: auto; padding: 0 11px !important; border: 0 !important; border-top: 1px solid #edf0f5 !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #76839a; font-size: 7px; }
.hr-table-footer > span { white-space: nowrap; }
.hr-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.hr-pagination button { min-width: 22px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; display: grid; place-items: center; color: #43526a; background: transparent; font: inherit; font-size: 8px; cursor: pointer; }
.hr-pagination button:hover:not(:disabled) { color: #1769e8; background: #f1f6ff; }
.hr-pagination button.is-active { color: #1769e8; background: #edf4ff; font-weight: 700; }
.hr-pagination button:disabled { color: #aeb8c7; cursor: default; }
.hr-pagination__ellipsis { width: 22px; color: #6e7c92; text-align: center; }
.hr-employees-card th, .hr-employees-card td { height: 27px; padding-top: 3px; padding-bottom: 3px; }
.hr-employees-card .hr-avatar { width: 21px; height: 21px; font-size: 7px; }
.hr-employees-card .hr-table-footer { min-height: 27px !important; }

.hr-summary-grid { height: calc(100% - 41px); padding: 11px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 7px; }
.hr-summary-item { min-width: 0; padding: 8px 7px; border-radius: 6px; display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; background: #f8faff; }
.hr-summary-item > span { grid-row: 1 / 3; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; align-self: center; }
.hr-summary-item .hr-icon { width: 14px; height: 14px; }
.hr-summary-item small { min-width: 0; color: #6b7890; font-size: 7px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-summary-item b { min-width: 0; font-size: 10px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-summary-item--blue > span { color: #1769e8; background: #eaf3ff; } .hr-summary-item--blue b { color: #145fda; }
.hr-summary-item--green > span { color: #269b54; background: #e8f7ed; } .hr-summary-item--green b { color: #248e4d; }
.hr-summary-item--red > span { color: #d62e4e; background: #ffebef; } .hr-summary-item--red b { color: #cb2947; }
.hr-summary-item--violet > span { color: #743ed5; background: #f0e9ff; } .hr-summary-item--violet b { color: #6c38ca; }
.hr-summary-item--cyan > span { color: #1591ad; background: #e6f5f8; } .hr-summary-item--cyan b { color: #167d95; }
.hr-summary-item--orange > span { color: #e58619; background: #fff1de; } .hr-summary-item--orange b { color: #d57911; }

.hr-time__stats { height: calc(100% - 41px); padding: 9px 7px 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hr-time__stat { min-width: 0; padding: 0 7px; display: flex; flex-direction: column; align-items: center; border-right: 1px solid #e7ebf2; text-align: center; }
.hr-time__stat:last-child { border-right: 0; }
.hr-time__icon { width: 34px; height: 34px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; }
.hr-time__icon .hr-icon { width: 19px; height: 19px; }
.hr-time__stat small { color: #5e6d86; font-size: 7px; }
.hr-time__stat b { margin: 3px 0; color: #17243d; font-size: 17px; line-height: 1; }
.hr-time__stat em { color: #728097; font-size: 7px; font-style: normal; }
.hr-time__stat i { width: 100%; height: 4px; margin-top: auto; overflow: hidden; border-radius: 99px; background: #edf1f6; }
.hr-time__stat i span { display: block; height: 100%; border-radius: inherit; min-width: 3px; }
.hr-time__stat--green .hr-time__icon { color: #26a359; background: #e7f7ec; } .hr-time__stat--green i span { background: #2cab62; }
.hr-time__stat--orange .hr-time__icon { color: #ed8a16; background: #fff2df; } .hr-time__stat--orange i span { background: #ee8f00; }
.hr-time__stat--red .hr-time__icon { color: #d93152; background: #ffecef; } .hr-time__stat--red i span { background: #d62e4d; }
.hr-time__stat--violet .hr-time__icon { color: #7440d8; background: #f0eaff; } .hr-time__stat--violet i span { background: #7140d3; }

.hr-mini .hr-table-wrap { max-height: 112px; }
.hr-mini table { font-size: 8px; }
.hr-mini table { line-height: 1.1; }
.hr-mini th, .hr-mini td { height: 18px; padding: 2px 10px; font-size: 7px; }
.hr-mini .hr-badge { padding: 3px 6px; }
.hr-empty { height: 78px !important; padding: 20px !important; color: #738098 !important; text-align: center !important; }

.hr-pipeline__steps { height: calc(100% - 41px); padding: 14px 10px; display: flex; align-items: stretch; }
.hr-pipeline__step { position: relative; min-width: 0; flex: 1; margin-right: -8px; padding: 10px 8px 8px 14px; clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 14px 50%); border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font: inherit; cursor: pointer; }
.hr-pipeline__step:first-child { clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%); padding-left: 7px; }
.hr-pipeline__step:last-child { margin-right: 0; }
.hr-pipeline__step span { font-size: 8px; font-weight: 700; }
.hr-pipeline__step b { margin: 7px 0 4px; color: #17243e; font-size: 20px; line-height: 1; }
.hr-pipeline__step small { color: #738097; font-size: 7px; }
.hr-pipeline__step--blue { color: #1769e8; background: #f2f6fd; }
.hr-pipeline__step--green { color: #218f50; background: #eff9f2; }
.hr-pipeline__step--orange { color: #c77609; background: #fff7e9; }
.hr-pipeline__step--violet { color: #7040c8; background: #f5f0fc; }

.hr-alert { height: calc((100% - 41px) / 4); min-height: 0; margin: 0; padding: 2px 13px; border-bottom: 1px solid #edf0f5; display: flex; align-items: center; gap: 9px; color: #3f4d66; font-size: 8px; line-height: 1.15; }
.hr-alert:last-child { border-bottom: 0; }
.hr-alert > span { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; }
.hr-alert .hr-icon { width: 13px; height: 13px; }
.hr-alert--red > span { color: #d62e4c; background: #ffe9ed; }
.hr-alert--orange > span { color: #e68817; background: #fff1dc; }
.hr-alert--violet > span { color: #7440d3; background: #efe8ff; }
.hr-alert--green > span { color: #249650; background: #e8f6ec; }

.hr-directory-card { min-height: clamp(510px, calc(100vh - 250px), 650px); border-radius: 11px; display: flex; flex-direction: column; }
.hr-directory-card__header { min-height: 76px !important; padding: 14px 24px !important; }
.hr-directory-card__header > div { min-width: 0; }
.hr-directory-card__header h2 { margin: 0 0 3px; font-size: 17px; }
.hr-directory-card__header p { margin: 0; color: #67758f; font-size: 11px; }
.hr-page .hr-card header .hr-context-action { min-height: 36px; padding: 0 7px; border: 0; border-radius: 7px; display: inline-flex; align-items: center; gap: 8px; color: #145ed4; background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: color .18s ease, background-color .18s ease; }
.hr-page .hr-card header .hr-context-action:hover { color: #0d51bd; background: #f2f7ff; }
.hr-page .hr-card header .hr-context-action .hr-icon { width: 17px; height: 17px; }
.hr-directory-toolbar { min-height: 78px; padding: 15px 24px; border-bottom: 1px solid #e5eaf2; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.hr-directory-search { width: min(360px, 48%); height: 42px; padding: 0 13px; border: 1px solid #d9e2ef; border-radius: 9px; display: flex; align-items: center; gap: 10px; color: #6b7890; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.hr-directory-search:focus-within { border-color: #4d8ff3; box-shadow: 0 0 0 3px rgba(23, 105, 232, .09); }
.hr-directory-search .hr-icon { width: 17px; height: 17px; }
.hr-page .hr-directory-search input.hr-directory-search__input[type="search"] { width: 100%; min-width: 0; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; outline: 0; color: #25344d; background: transparent; box-shadow: none; font: inherit; font-size: 12px; }
.hr-page .hr-directory-search input.hr-directory-search__input[type="search"]:focus { border: 0; outline: 0; box-shadow: none; }
.hr-directory-search input::placeholder { color: #7a879c; }
.hr-directory-toolbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hr-record-count { min-width: 102px; height: 42px; padding: 0 14px; border: 1px solid #e4e9f1; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #68768e; background: #fafbfd; font-size: 11px; white-space: nowrap; }
.hr-directory-table { position: relative; min-height: 0; flex: 1; overflow: auto; }
.hr-directory-table table { table-layout: fixed; font-size: 12px; }
.hr-directory-table th { height: 50px; padding: 0 24px; color: #52617b; background: #fbfcfe; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.hr-directory-table td { height: 58px; padding: 8px 24px; color: #40506a; transition: background-color .16s ease; }
.hr-directory-table tbody tr:hover td { background: #f8fbff; }
.hr-employees-directory .hr-directory-table th:nth-child(1) { width: 18%; }
.hr-employees-directory .hr-directory-table th:nth-child(2) { width: 16%; }
.hr-employees-directory .hr-directory-table th:nth-child(3) { width: 21%; }
.hr-employees-directory .hr-directory-table th:nth-child(4) { width: 14%; }
.hr-employees-directory .hr-directory-table th:nth-child(5) { width: 16%; }
.hr-employees-directory .hr-directory-table th:nth-child(6) { width: 15%; }
.hr-directory-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hr-directory-person .hr-avatar { width: 36px; height: 36px; font-size: 10px; }
.hr-directory-person > div { min-width: 0; }
.hr-directory-person b, .hr-directory-primary { display: block; overflow: hidden; color: #24324a; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.hr-directory-person small, .hr-directory-table td > small { display: block; margin-top: 3px; overflow: hidden; color: #7a879b; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.hr-directory-table .hr-badge { min-width: 0; padding: 5px 9px; border-radius: 5px; font-size: 9px; }
.hr-employee-empty { min-height: 330px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #25334a; text-align: center; }
.hr-employee-empty__illustration { width: 185px; height: auto; margin-bottom: 4px; }
.hr-employee-empty h3 { margin: 0 0 6px; color: #17243d; font-size: 17px; }
.hr-employee-empty p { margin: 0 0 18px; color: #69768d; font-size: 12px; }
.hr-empty-action { min-height: 39px; padding: 0 16px; border: 1px solid #327cf0; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; color: #145ed4; background: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }
.hr-empty-action:hover { color: #0d51bd; border-color: #1769e8; background: #f3f7ff; transform: translateY(-1px); }
.hr-empty-action .hr-icon { width: 16px; height: 16px; }

.hr-module-table table { min-width: 860px; table-layout: auto; }
.hr-module-table th, .hr-module-table td { padding-right: 18px; padding-left: 18px; }
.hr-module-table th { font-size: 9px; text-transform: uppercase; }
.hr-module-table td { font-size: 11px; }
.hr-module-table .hr-directory-primary { font-size: 11px; }
.hr-module-table .hr-badge { min-width: 0; }
.hr-module-directory--recruitment .hr-module-table table,
.hr-module-directory--documents .hr-module-table table { min-width: 760px; }
.hr-module-directory--recruitment .hr-module-table th:last-child,
.hr-module-directory--recruitment .hr-module-table td:last-child { width: 108px; }
.hr-row-edit { min-height: 30px; padding: 0 9px; border: 1px solid #d3e1f6; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #155fcf; background: #f8fbff; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.hr-row-edit:hover { border-color: #8cb5f4; background: #edf5ff; transform: translateY(-1px); }
.hr-row-edit .hr-icon { width: 14px; height: 14px; }
.hr-module-empty__visual { position: relative; width: 154px; height: 112px; margin: 0 0 10px; color: #1769e8; }
.hr-module-empty__visual::before { content: ""; position: absolute; inset: 3px 23px 1px; border-radius: 50%; background: #f1f6ff; }
.hr-module-empty__visual i, .hr-module-empty__visual b { position: absolute; display: block; border: 1px solid #c9daf8; border-radius: 10px; background: #fff; box-shadow: 0 8px 20px rgba(45, 84, 151, .08); }
.hr-module-empty__visual i { width: 78px; height: 52px; left: 22px; top: 37px; transform: rotate(-8deg); }
.hr-module-empty__visual b { width: 78px; height: 52px; right: 20px; top: 37px; transform: rotate(8deg); }
.hr-module-empty__visual > span { position: absolute; left: 50%; top: 25px; z-index: 2; width: 72px; height: 72px; border: 1px solid currentColor; border-radius: 18px; display: grid; place-items: center; transform: translateX(-50%); background: #edf4ff; box-shadow: 0 10px 24px rgba(35, 90, 183, .14); }
.hr-module-empty__visual .hr-icon { width: 32px; height: 32px; stroke-width: 1.65; }
.hr-module-empty__visual--green { color: #219a54; } .hr-module-empty__visual--green::before, .hr-module-empty__visual--green > span { background: #ecf8f0; }
.hr-module-empty__visual--orange { color: #df8112; } .hr-module-empty__visual--orange::before, .hr-module-empty__visual--orange > span { background: #fff5e8; }
.hr-module-empty__visual--violet { color: #7140d1; } .hr-module-empty__visual--violet::before, .hr-module-empty__visual--violet > span { background: #f3edff; }
.hr-module-empty__visual--cyan { color: #168ca7; } .hr-module-empty__visual--cyan::before, .hr-module-empty__visual--cyan > span { background: #ecf8fa; }

.hr-reports-directory { min-height: clamp(560px, calc(100vh - 250px), 720px); }
.hr-report-global-filters { min-height: 83px; padding: 12px 24px; border-bottom: 1px solid #e5eaf2; display: grid; grid-template-columns: repeat(3, minmax(170px, 230px)); align-items: center; gap: 12px; }
.hr-report-global-filters.is-compact { min-height: 0; padding: 0; border: 0; grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.hr-report-control { min-width: 0; }
.hr-report-control > span { display: block; margin: 0 0 5px; color: #65738a; font-size: 9px; font-weight: 700; }
.hr-page .hr-report-control .hr-report-filter-input { width: 100%; height: 38px; min-height: 38px; padding: 0 11px; border: 1px solid #d9e2ef; border-radius: 8px; outline: 0; color: #27364e; background-color: #fff; box-shadow: none; font: inherit; font-size: 11px; transition: border-color .18s ease, box-shadow .18s ease; }
.hr-page .hr-report-control .hr-report-filter-input:focus { border-color: #4d8ff3; outline: 0; box-shadow: 0 0 0 3px rgba(23, 105, 232, .09); }
.hr-report-grid { min-height: 0; padding: 18px 24px 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 12px; flex: 1; overflow: auto; }
.hr-page .hr-report-grid .hr-report-tile { position: relative; min-width: 0; min-height: 126px; padding: 15px 40px 14px 15px; border: 1px solid #e2e8f1; border-radius: 10px; display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center; column-gap: 11px; color: #26354e; background: #fbfcff; box-shadow: none; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.hr-page .hr-report-grid .hr-report-tile:hover { border-color: #cbdaf1; background: #fff; box-shadow: 0 7px 18px rgba(31, 63, 112, .08); transform: translateY(-1px); }
.hr-report-tile__icon { grid-row: 1 / 4; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; align-self: center; color: #1769e8; background: #eaf3ff; }
.hr-report-tile__icon .hr-icon { width: 20px; height: 20px; }
.hr-report-tile b { min-width: 0; align-self: end; overflow: hidden; color: #23324a; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.hr-report-tile small { min-width: 0; margin-top: 4px; overflow: hidden; color: #738097; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.hr-report-tile__summary { min-width: 0; margin-top: 7px; overflow: hidden; color: #7b879a; font-size: 9px; font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.hr-report-tile__summary.has-data { color: #1769e8; }
.hr-report-tile__chevron { position: absolute; top: 50%; right: 15px; width: 14px; height: 14px; color: #9aa8bc; transform: translateY(-50%); }
.hr-report-tile--green .hr-report-tile__icon { color: #219a54; background: #eaf8ef; }
.hr-report-tile--violet .hr-report-tile__icon { color: #7140d1; background: #f1eaff; }
.hr-report-tile--cyan .hr-report-tile__icon { color: #168ca7; background: #e8f7fa; }
.hr-report-tile--orange .hr-report-tile__icon { color: #df8112; background: #fff2df; }
.hr-report-tile--red .hr-report-tile__icon { color: #ce3450; background: #ffedf1; }

.hr-report-workspace { display: grid; gap: 13px; }
.hr-report-detail-heading { min-height: 80px; padding: 2px 3px 7px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.hr-report-detail-heading > div { min-width: 0; }
.hr-report-detail-heading > div > button { margin: 0 0 7px; padding: 0; border: 0; display: inline-flex; align-items: center; gap: 5px; color: #1769e8; background: none; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.hr-report-back-icon { width: 13px; height: 13px; transform: rotate(180deg); }
.hr-report-detail-heading p { margin: 0 0 5px; color: #718096; font-size: 9px; }
.hr-report-detail-heading p b { padding: 0 4px; color: #a4afbf; }
.hr-report-detail-heading h2 { margin: 0 0 4px; color: #17243c; font-size: 21px; line-height: 1.1; }
.hr-report-detail-heading small { display: block; color: #65738a; font-size: 11px; }
.hr-report-export { min-height: 39px; padding: 0 16px; border: 1px solid #1769e8; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: #fff; background: #1769e8; box-shadow: 0 5px 12px rgba(23, 105, 232, .14); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: background-color .18s ease, transform .18s ease; }
.hr-report-export:hover { background: #1059c9; transform: translateY(-1px); }
.hr-report-export .hr-icon { width: 16px; height: 16px; }
.hr-report-filter-panel { min-height: 0; padding: 15px 18px; display: grid; grid-template-columns: minmax(190px, .7fr) minmax(490px, 1.8fr); align-items: end; gap: 14px 22px; overflow: visible; }
.hr-report-filter-panel > div:first-child h3 { margin: 0 0 4px; color: #1f2e47; font-size: 13px; }
.hr-report-filter-panel > div:first-child p { margin: 0; color: #748197; font-size: 9px; }
.hr-report-specific-filters { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 10px; }
.hr-report-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; }
.hr-report-kpi { min-width: 0; min-height: 86px; padding: 13px; border: 1px solid #e2e8f1; border-radius: 10px; display: flex; align-items: center; gap: 11px; background: #fff; box-shadow: 0 3px 10px rgba(35, 58, 94, .045); }
.hr-report-kpi > span { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; color: #1769e8; background: #eaf3ff; }
.hr-report-kpi > span .hr-icon { width: 20px; height: 20px; }
.hr-report-kpi > div { min-width: 0; }
.hr-report-kpi small, .hr-report-kpi em { display: block; overflow: hidden; color: #6d7b91; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.hr-report-kpi strong { display: block; margin: 4px 0 2px; overflow: hidden; color: #17243c; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.hr-report-kpi--green > span { color: #219a54; background: #eaf8ef; }
.hr-report-kpi--orange > span { color: #df8112; background: #fff2df; }
.hr-report-kpi--violet > span { color: #7140d1; background: #f1eaff; }
.hr-report-kpi--cyan > span { color: #168ca7; background: #e8f7fa; }
.hr-report-kpi--red > span { color: #ce3450; background: #ffedf1; }
.hr-report-notice { margin: 0; padding: 10px 13px; border: 1px solid #dbe6f5; border-radius: 8px; display: flex; align-items: center; gap: 9px; color: #53637c; background: #f8fbff; font-size: 10px; }
.hr-report-notice .hr-icon { width: 16px; height: 16px; color: #3979d7; }
.hr-report-visual, .hr-report-detail-card { min-width: 0; overflow: hidden; border: 1px solid #e2e8f1; border-radius: 10px; background: #fff; box-shadow: 0 3px 10px rgba(35, 58, 94, .045); }
.hr-report-visual > header, .hr-report-detail-card > header { min-height: 58px; padding: 11px 16px; border-bottom: 1px solid #e8edf4; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hr-report-visual h3, .hr-report-detail-card h3 { margin: 0 0 3px; color: #1f2d45; font-size: 13px; }
.hr-report-visual header p, .hr-report-detail-card header p { margin: 0; color: #738097; font-size: 9px; }
.hr-report-detail-card > header > span { color: #6d7b91; font-size: 10px; }
.hr-report-bars { padding: 14px 17px 17px; display: grid; gap: 10px; }
.hr-report-bars article { min-width: 0; display: grid; grid-template-columns: minmax(120px, 1fr) minmax(180px, 3fr) minmax(70px, auto); align-items: center; gap: 12px; }
.hr-report-bars article > div { min-width: 0; }
.hr-report-bars b, .hr-report-bars small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-report-bars b { color: #33425a; font-size: 10px; }
.hr-report-bars small { margin-top: 2px; color: #8390a3; font-size: 8px; }
.hr-report-bars article > span { height: 8px; overflow: hidden; border-radius: 99px; background: #edf2f8; }
.hr-report-bars i { display: block; height: 100%; border-radius: inherit; background: #3b82ed; }
.hr-report-bars strong { color: #27364e; font-size: 10px; text-align: right; }
.hr-report-chart-empty { min-height: 135px; padding: 30px; display: grid; place-items: center; color: #7b879a; font-size: 11px; text-align: center; }
.hr-report-pipeline { min-height: 128px; padding: 18px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; gap: 8px; }
.hr-report-pipeline article { position: relative; padding: 14px 28px 14px 12px; border: 1px solid #dfE7f2; border-radius: 9px; display: flex; flex-direction: column; justify-content: center; color: #1769e8; background: #f5f8ff; }
.hr-report-pipeline article:nth-child(2) { color: #168ca7; background: #eef9fb; }.hr-report-pipeline article:nth-child(3) { color: #df8112; background: #fff7eb; }.hr-report-pipeline article:nth-child(4) { color: #7140d1; background: #f6f1ff; }.hr-report-pipeline article:nth-child(5) { color: #219a54; background: #eef9f2; }
.hr-report-pipeline small { font-size: 9px; }.hr-report-pipeline strong { margin-top: 5px; color: #17243c; font-size: 20px; }.hr-report-pipeline .hr-icon { position: absolute; top: 50%; right: 8px; width: 14px; height: 14px; transform: translateY(-50%); }
.hr-report-table-wrap { width: 100%; overflow: auto; }
.hr-report-table-wrap table { min-width: 840px; table-layout: auto; font-size: 10px; }
.hr-report-table-wrap th { height: 42px; padding: 8px 14px; color: #53627a; background: #fbfcfe; font-size: 8px; letter-spacing: .025em; text-transform: uppercase; }
.hr-report-table-wrap td { height: 52px; max-width: 230px; padding: 8px 14px; color: #415069; transition: background-color .16s ease; }
.hr-report-table-wrap tbody tr:hover td { background: #f8fbff; }
.hr-report-cell { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-report-cell small { margin-top: 3px; color: #7a879b; font-size: 8px; }
.hr-report-drill { max-width: 100%; padding: 3px 0; border: 0; display: block; color: #185fc8; background: none; font: inherit; text-align: left; cursor: pointer; }
.hr-report-drill b, .hr-report-drill small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-report-drill b { font-size: 10px; }.hr-report-drill small { margin-top: 3px; color: #7a879b; font-size: 8px; }
.hr-report-status { padding: 5px 8px; border-radius: 5px; display: inline-flex; color: #56647a; background: #edf1f6; font-size: 8px; font-weight: 700; white-space: nowrap; }
.hr-report-status--success { color: #178d47; background: #e7f6ec; }.hr-report-status--warning { color: #b97006; background: #fff2dc; }.hr-report-status--danger { color: #be2943; background: #ffe8ec; }.hr-report-status--info { color: #5f3db5; background: #efe9ff; }
.hr-report-table-footer { min-height: 48px; padding: 7px 13px; border-top: 1px solid #e8edf4; display: flex; align-items: center; justify-content: flex-end; gap: 18px; color: #748197; font-size: 9px; }
.hr-report-table-footer > div { margin-right: auto; }.hr-report-table-footer label { display: flex; align-items: center; gap: 6px; }.hr-report-table-footer select { min-height: 28px; height: 28px; padding: 0 22px 0 8px; border: 1px solid #dbe3ee; border-radius: 6px; font: inherit; font-size: 9px; }
.hr-report-table-footer nav { display: flex; align-items: center; gap: 3px; }.hr-report-table-footer nav button { width: 27px; height: 27px; padding: 0; border: 0; border-radius: 5px; color: #526078; background: transparent; font: inherit; font-size: 9px; cursor: pointer; }.hr-report-table-footer nav button:hover:not(:disabled), .hr-report-table-footer nav button.is-active { color: #1769e8; background: #edf4ff; }.hr-report-table-footer nav button:disabled { color: #b5becc; cursor: default; }
.hr-report-empty { min-height: 165px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.hr-report-empty h3 { margin-bottom: 5px; font-size: 14px; }.hr-report-empty p { margin: 0; color: #738097; font-size: 10px; }
.hr-report-state-card { min-height: 430px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.hr-report-loader, .hr-report-message { display: flex; flex-direction: column; align-items: center; text-align: center; }.hr-report-loader > span { width: 34px; height: 34px; margin-bottom: 14px; border: 3px solid #dce8fa; border-top-color: #1769e8; border-radius: 50%; animation: hr-report-spin .8s linear infinite; }.hr-report-loader h2, .hr-report-message h3 { margin: 0 0 5px; color: #1d2b43; font-size: 16px; }.hr-report-loader p, .hr-report-message p { max-width: 430px; margin: 0; color: #718097; font-size: 11px; }.hr-report-message > span { width: 40px; height: 40px; margin-bottom: 12px; border-radius: 50%; display: grid; place-items: center; color: #1769e8; background: #eaf3ff; font-weight: 800; }
@keyframes hr-report-spin { to { transform: rotate(360deg); } }

.hr-dialog { width: min(760px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 24px 70px rgba(13, 33, 71, .34); }
.hr-dialog::backdrop { background: rgba(20, 35, 60, .54); }
.hr-dialog form > header, .hr-dialog form > footer { padding: 16px 20px; border-bottom: 1px solid var(--hr-line); display: flex; align-items: center; justify-content: space-between; }
.hr-dialog h2 { margin: 0; }
.hr-dialog header button { border: 0; background: none; font-size: 25px; }
.hr-dialog form > footer { justify-content: flex-end; gap: 10px; border: 0; border-top: 1px solid var(--hr-line); }
.hr-form-grid { max-height: 65vh; padding: 20px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.hr-form-grid label span { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; }
.hr-form-grid input, .hr-form-grid select, .hr-form-grid textarea { width: 100%; padding: 10px; border: 1px solid #d9e1ed; border-radius: 8px; color: #25344d; background: #fff; font: inherit; }
.hr-form-grid textarea { min-height: 118px; line-height: 1.5; resize: vertical; white-space: pre-wrap; }
.hr-form-grid input:focus, .hr-form-grid select:focus, .hr-form-grid textarea:focus { border-color: #4d8ff3; outline: 0; box-shadow: 0 0 0 3px rgba(23, 105, 232, .09); }
.hr-form-field--multiline { grid-column: 1 / -1; }
.hr-form-note { grid-column: 1 / -1; padding: 12px; border-radius: 8px; color: var(--hr-muted); background: #f5f8fd; font-size: 12px; }
.hr-loading { padding: 60px; color: var(--hr-muted); text-align: center; }

@media (max-width: 960px) {
  .hr-kpis { grid-template-columns: repeat(3, 1fr); }
  .hr-dashboard { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: 320px 154px 178px 178px; grid-template-areas: "quick quick employees employees employees employees employees employees" "summary summary summary summary time time time time" "mini mini mini mini pipeline pipeline pipeline pipeline" "alerts alerts alerts alerts alerts alerts alerts alerts"; }
  .hr-quick__action { min-height: 34px; }
  .hr-report-grid { grid-template-columns: repeat(3, 1fr); }
  .hr-report-filter-panel { grid-template-columns: 1fr; align-items: stretch; }
  .hr-report-specific-filters { grid-column: 1; }
  .hr-report-pipeline { overflow-x: auto; grid-template-columns: repeat(5, minmax(150px, 1fr)); }
}

@media (max-width: 760px) {
  .hr-page { padding: 15px 13px 24px; }
  .hr-heading { align-items: flex-start; flex-direction: column; }
  .hr-heading__actions { width: 100%; }
  .hr-heading__actions .hr-btn { flex: 1; padding: 0 10px; }
  .hr-kpis { grid-template-columns: 1fr 1fr; }
  .hr-dashboard { display: flex; flex-direction: column; }
  .hr-card { min-height: 154px; }
  .hr-quick { min-height: 310px; }
  .hr-employees-card { min-height: 310px; }
  .hr-summary, .hr-time { min-height: 170px; }
  .hr-mini, .hr-alerts { min-height: 190px; }
  .hr-report-grid { grid-template-columns: 1fr 1fr; }
  .hr-report-global-filters, .hr-report-global-filters.is-compact { grid-template-columns: 1fr; }
  .hr-reports-directory { min-height: 680px; }
  .hr-report-detail-heading { align-items: flex-start; flex-direction: column; }
  .hr-report-export { width: 100%; justify-content: center; }
  .hr-report-specific-filters { grid-template-columns: 1fr; }
  .hr-report-bars article { grid-template-columns: minmax(100px, 1fr) minmax(120px, 2fr) minmax(55px, auto); gap: 8px; }
  .hr-report-table-footer { align-items: flex-start; flex-wrap: wrap; }
  .hr-report-table-footer > div { width: 100%; margin-right: 0; }
  .hr-form-grid { grid-template-columns: 1fr; }
  .hr-directory-card { min-height: 520px; }
  .hr-directory-card__header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hr-directory-toolbar { align-items: stretch; flex-direction: column; }
  .hr-directory-search { width: 100%; }
  .hr-directory-toolbar__right { margin-left: 0; }
  .hr-record-count { width: 100%; }
  .hr-directory-table { overflow-x: auto; }
  .hr-directory-table table { min-width: 880px; }
}

@media (max-width: 480px) {
  .hr-heading h1 { font-size: 25px; }
  .hr-heading__actions { flex-direction: column; }
  .hr-heading__actions .hr-btn { width: 100%; }
  .hr-kpis, .hr-report-grid { grid-template-columns: 1fr; }
  .hr-kpi { min-height: 80px; }
  .hr-summary-grid { grid-template-columns: 1fr 1fr; height: auto; }
  .hr-time__stats { grid-template-columns: 1fr 1fr; gap: 12px 0; height: auto; }
  .hr-time__stat:nth-child(2) { border-right: 0; }
  .hr-report-grid { grid-template-columns: 1fr; }
  .hr-report-kpis { grid-template-columns: 1fr; }
  .hr-report-bars article { grid-template-columns: 1fr auto; }
  .hr-report-bars article > span { grid-column: 1 / -1; grid-row: 2; }
}