/* Additional HR views share the existing card, table, button and metric system. */
.x-metrics {
  min-width: 0;
}

.x-section-note {
  margin-bottom: 20px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f9fbfc;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.x-subheading {
  margin: 24px 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.x-subheading p {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.7;
}

.x-toolbar {
  min-width: 0;
  gap: 10px;
}

.x-toolbar > * {
  min-width: 0;
}

.x-toolbar .search-field {
  min-width: 180px;
}

.x-toolbar .x-status-inline {
  margin-left: auto;
}

.x-board-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 7px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #b7cbd1 #edf2f5;
}

.x-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(240px, 1fr));
  gap: 14px;
  min-width: 1256px;
  width: 100%;
  align-items: start;
}

.x-stage {
  min-width: 0;
  padding: 14px;
  background: #edf2f5;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.x-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 2px 14px;
}

.x-stage-head h2,
.x-stage-head h3,
.x-stage-head strong {
  font-size: .9rem;
  font-weight: 650;
}

.x-stage-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  background: #fff;
  border-radius: 6px;
  color: #6c8390;
  font-size: .75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.x-candidate {
  padding: 16px;
  margin-bottom: 12px;
  min-width: 0;
  border-radius: 10px;
}

.x-candidate:last-child {
  margin-bottom: 0;
}

.x-candidate .person-top {
  align-items: flex-start;
}

.x-candidate .person-top > div {
  min-width: 0;
}

.x-candidate .person-top strong {
  font-size: .875rem;
  overflow-wrap: anywhere;
}

.x-candidate .person-top small {
  font-size: .73rem;
  line-height: 1.6;
}

.x-candidate .avatar {
  width: 32px;
  height: 32px;
  font-size: .78rem;
}

.x-candidate-meta {
  display: flex;
  gap: 6px 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.6;
}

.x-candidate-note {
  padding: 10px 11px;
  margin-top: 12px;
  background: #f7f9fb;
  border-radius: 7px;
  color: #6c818d;
  font-size: .75rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.x-candidate-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 13px;
  margin-top: 13px;
  border-top: 1px solid var(--line);
}

.x-candidate-bottom small {
  color: var(--muted);
  font-size: .7rem;
}

.x-candidate-bottom .button {
  font-size: .73rem;
  padding: 7px 10px;
}

.x-empty-stage {
  display: grid;
  place-items: center;
  min-height: 135px;
  border: 1px dashed #cfdae1;
  border-radius: 9px;
  color: var(--muted);
  padding: 24px 15px;
  text-align: center;
  font-size: .8rem;
  line-height: 1.8;
}

.x-attendance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  align-items: start;
  gap: 22px;
}

.x-attendance-grid > *,
.x-report-grid > *,
.x-self-grid > * {
  min-width: 0;
}

.x-correction-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.x-correction {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  min-width: 0;
}

.x-correction-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.x-correction-main > div {
  min-width: 0;
  flex: 1;
}

.x-correction-main strong {
  font-size: .875rem;
}

.x-correction-main p,
.x-correction-main small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  font-size: .75rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.x-correction-main .badge {
  flex-shrink: 0;
}

.x-correction-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 11px 0;
  margin: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.6;
}

.x-correction-time strong {
  color: var(--ink);
  font-weight: 550;
}

.x-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.x-report-list {
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding-top: 8px;
}

.x-report-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  font-size: .8rem;
  min-width: 0;
}

.x-report-row > :first-child {
  overflow-wrap: anywhere;
}

.x-report-bar {
  height: 8px;
  background: #edf2f5;
  border-radius: 7px;
  overflow: hidden;
  min-width: 0;
}

.x-report-bar > span {
  display: block;
  height: 100%;
  max-width: 100%;
  background: #4c9a90;
  border-radius: inherit;
}

.x-report-count {
  text-align: right;
  font-weight: 550;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.x-report-foot {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.x-self-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.5fr);
  gap: 22px;
  align-items: start;
}

.x-self-person {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 4px 0 22px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.x-self-person .avatar {
  width: 56px;
  height: 56px;
  font-size: 1.15rem;
}

.x-self-person > div {
  min-width: 0;
}

.x-self-person strong {
  display: block;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}

.x-self-person p,
.x-self-person small {
  display: block;
  color: var(--muted);
  font-size: .8rem;
  margin-top: 6px;
  line-height: 1.7;
}

.x-role-note {
  padding: 13px 16px;
  margin-bottom: 20px;
  border: 1px solid #d5ebe4;
  border-radius: 10px;
  background: var(--teal-soft);
  color: #52786e;
  font-size: .8rem;
  line-height: 1.75;
}

.x-role-note strong {
  color: var(--teal);
  font-weight: 600;
}

.x-status-inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.6;
}

.x-card-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.x-card-tools .button {
  white-space: normal;
  text-align: center;
}

@media (max-width: 1180px) {
  .x-attendance-grid,
  .x-self-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .x-report-grid {
    gap: 18px;
  }
}

@media (max-width: 980px) {
  .x-report-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .x-section-note,
  .x-role-note {
    padding: 12px 14px;
    font-size: .75rem;
    margin-bottom: 18px;
  }

  .x-toolbar .search-field {
    min-width: 0;
    flex-basis: 100%;
  }

  .x-toolbar .x-status-inline {
    margin-left: 0;
    flex-basis: 100%;
  }

  .x-board {
    gap: 12px;
    min-width: 1248px;
  }

  .x-stage {
    padding: 12px;
  }

  .x-report-row {
    grid-template-columns: 78px minmax(0, 1fr) 42px;
    gap: 10px;
    font-size: .75rem;
  }

  .x-self-person {
    gap: 12px;
  }

  .x-card-tools {
    justify-content: flex-start;
  }
}