.hrapp {
  color: #172235;
  font: 14px/1.45 Inter, Segoe UI, Arial, sans-serif;
}

.hrapp-shell {
  background: #f6f8fb;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
}

.hrapp-header {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 24px 26px 20px;
  background: linear-gradient(135deg, #fff 0%, #eef6f3 54%, #edf3ff 100%);
  border-bottom: 1px solid #d4dee9;
}

.hrapp-header > :first-child {
  min-width: 0;
}

.hrapp-kicker {
  margin: 0 0 8px;
  color: #607185;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hrapp-header h1,
.hrapp-card h2,
.hrapp-card h3,
.hrapp-panel h2,
.hrapp-panel h3,
.hrapp-detail h2 {
  color: #172235;
  letter-spacing: 0;
  margin: 0;
}

.hrapp-header h1 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.05;
}

.hrapp-header p,
.hrapp-card p,
.hrapp-panel p,
.hrapp-detail p,
.hrapp-muted {
  color: #596b7d;
}

.hrapp-header p {
  margin: 9px 0 0;
  max-width: 900px;
}

.hrapp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  justify-content: flex-end;
}

.hrapp-label {
  display: grid;
  gap: 6px;
  color: #526478;
  font-size: 12px;
  font-weight: 900;
}

.hrapp-input,
.hrapp-select,
.hrapp-textarea {
  width: 100%;
  border: 1px solid #cbd7e3;
  border-radius: 7px;
  background: #fff;
  color: #172235;
  padding: 10px 12px;
  outline: none;
}

.hrapp-textarea {
  min-height: 118px;
  resize: vertical;
}

.hrapp-input:focus,
.hrapp-select:focus,
.hrapp-textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.hrapp-button {
  border: 1px solid #c2cfdd;
  border-radius: 7px;
  background: #fff;
  color: #172235;
  cursor: pointer;
  font-weight: 900;
  padding: 10px 13px;
}

.hrapp-button.primary {
  background: #ff5a00;
  border-color: #ff5a00;
  color: #fff;
}

.hrapp-button.blue {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.hrapp-button.green {
  background: #148453;
  border-color: #148453;
  color: #fff;
}

.hrapp-button.red {
  background: #b42318;
  border-color: #b42318;
  color: #fff;
}

.hrapp-tabs {
  display: flex;
  flex-wrap: wrap;
  background: #e8eef5;
  border-bottom: 1px solid #d4dee9;
}

.hrapp-tab {
  border: 0;
  border-right: 1px solid #ced9e4;
  background: transparent;
  color: #455b70;
  cursor: pointer;
  font-weight: 900;
  padding: 14px 15px;
}

.hrapp-tab.active {
  background: #ff5a00;
  color: #fff;
}

.hrapp-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: #fff;
  border-bottom: 1px solid #d4dee9;
}

.hrapp-metric {
  min-height: 78px;
  padding: 16px;
  border-right: 1px solid #d4dee9;
}

.hrapp-metric b {
  display: block;
  font-size: 28px;
  line-height: 1;
}

.hrapp-metric span {
  display: block;
  color: #5f7183;
  font-size: 12px;
  font-weight: 900;
  margin-top: 8px;
}

.hrapp-body {
  padding: 16px;
}

.hrapp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .42fr);
  gap: 16px;
}

.hrapp-grid.full {
  grid-template-columns: 1fr;
}

.hrapp-card,
.hrapp-panel,
.hrapp-detail {
  background: #fff;
  border: 1px solid #d4dee9;
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(20, 42, 70, .06);
}

.hrapp-card,
.hrapp-panel {
  padding: 16px;
}

.hrapp-panel-title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hrapp-panel-title p {
  margin: 4px 0 0;
}

.hrapp-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.hrapp-card h3 {
  font-size: 15px;
}

.hrapp-card p {
  margin: 7px 0 12px;
}

.hrapp-progress {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #e7edf5;
}

.hrapp-progress > span {
  display: block;
  height: 100%;
  width: var(--score, 0%);
  background: linear-gradient(90deg, #ff5a00, #f59e0b 42%, #148453);
}

.hrapp-workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.hrapp-step {
  border: 1px solid #d4dee9;
  border-radius: 7px;
  background: #fbfdff;
  padding: 12px;
}

.hrapp-step b,
.hrapp-step small {
  display: block;
}

.hrapp-step small {
  color: #627485;
  margin-top: 5px;
}

.hrapp-split {
  display: grid;
  grid-template-columns: minmax(360px, .8fr) minmax(0, 1.2fr);
  gap: 14px;
}

.hrapp-list {
  display: grid;
  gap: 8px;
  max-height: 660px;
  overflow: auto;
  padding-right: 4px;
}

.hrapp-row-button {
  width: 100%;
  border: 1px solid #d4dee9;
  border-radius: 7px;
  background: #fff;
  color: #172235;
  cursor: pointer;
  display: grid;
  gap: 8px;
  padding: 12px;
  text-align: left;
}

.hrapp-row-button.active {
  border-color: #ff5a00;
  background: #fff5ee;
  box-shadow: inset 3px 0 0 #ff5a00;
}

.hrapp-row-button b,
.hrapp-table b {
  color: #172235;
}

.hrapp-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: #607185;
  font-size: 12px;
}

.hrapp-detail-head {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  border-bottom: 1px solid #d4dee9;
  padding: 18px;
}

.hrapp-detail-body {
  padding: 18px;
}

.hrapp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hrapp-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hrapp-form .full {
  grid-column: 1 / -1;
}

.hrapp-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.hrapp-info {
  background: #f8fbfe;
  border: 1px solid #d4dee9;
  border-radius: 7px;
  padding: 10px;
}

.hrapp-info span {
  color: #607185;
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hrapp-info b {
  display: block;
  margin-top: 4px;
}

.hrapp-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #e8eef5;
  color: #445a70;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 9px;
}

.hrapp-pill.green {
  background: #dff5ea;
  color: #11613d;
}

.hrapp-pill.blue {
  background: #dbeafe;
  color: #1d4ed8;
}

.hrapp-pill.orange {
  background: #fff0df;
  color: #b45309;
}

.hrapp-pill.red {
  background: #fee4e2;
  color: #b42318;
}

.hrapp-pill.dark {
  background: #e2e8f0;
  color: #243447;
}

.hrapp-table-wrap {
  max-width: 100%;
  overflow: auto;
}

.hrapp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hrapp-table th,
.hrapp-table td {
  border-bottom: 1px solid #dce5ef;
  padding: 11px 10px;
  text-align: left;
  vertical-align: top;
}

.hrapp-table th {
  background: #f1f5f9;
  color: #526478;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hrapp-resource-grid,
.hrapp-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hrapp-resource {
  border: 1px solid #d4dee9;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.hrapp-rating-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1500px) {
  .hrapp-header,
  .hrapp-grid,
  .hrapp-split {
    grid-template-columns: 1fr;
  }

  .hrapp-toolbar {
    justify-content: flex-start;
  }

  .hrapp-toolbar .hrapp-label {
    min-width: min(240px, 100%);
  }

  .hrapp-header h1 {
    min-width: 12ch;
  }
}

@media (max-width: 1180px) {

  .hrapp-metrics,
  .hrapp-cards,
  .hrapp-workflow,
  .hrapp-resource-grid,
  .hrapp-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .hrapp-header {
    padding: 18px;
  }

  .hrapp-body {
    padding: 10px;
  }

  .hrapp-tabs,
  .hrapp-toolbar {
    display: grid;
  }

  .hrapp-tab {
    border-right: 0;
    border-bottom: 1px solid #ced9e4;
  }

  .hrapp-metrics,
  .hrapp-cards,
  .hrapp-workflow,
  .hrapp-form,
  .hrapp-info-grid,
  .hrapp-resource-grid,
  .hrapp-directory-grid,
  .hrapp-rating-grid {
    grid-template-columns: 1fr;
  }

  .hrapp-detail-head {
    display: grid;
  }
}

/* V8.3.5.20: align HR with the Maintenance-style operational app shell. */
.hrapp {
  width: min(1800px, 100%);
  margin: 0 auto 48px;
  --hr-orange: #f97316;
  --hr-orange-dark: #ea580c;
  --hr-blue: #2563eb;
  --hr-line: #d5dde6;
  --hr-bg: #f4f6f8;
  --hr-soft: #eef3f7;
  --hr-ink: #15212e;
  --hr-muted: #627182;
  color: var(--hr-ink);
}

.hrapp-shell {
  min-height: calc(100vh - 130px);
  background: var(--hr-bg);
  border-color: var(--hr-line);
  box-shadow: 0 20px 48px rgba(15, 23, 42, .16);
}

.hrapp-header {
  background: linear-gradient(180deg, #ffffff, #edf3f8);
  border-bottom-color: var(--hr-line);
}

.hrapp-kicker {
  color: #9a3412;
}

.hrapp-header h1,
.hrapp-card h2,
.hrapp-card h3,
.hrapp-panel h2,
.hrapp-panel h3,
.hrapp-detail h2,
.hrapp-metric b,
.hrapp-info b,
.hrapp-row-button b,
.hrapp-table b {
  color: var(--hr-ink);
}

.hrapp-header p,
.hrapp-card p,
.hrapp-panel p,
.hrapp-detail p,
.hrapp-muted,
.hrapp-metric span,
.hrapp-info span,
.hrapp-step small,
.hrapp-row-meta {
  color: var(--hr-muted);
}

.hrapp-label {
  color: var(--hr-ink);
}

.hrapp-tabs {
  gap: 1px;
  background: var(--hr-line);
  border-bottom-color: var(--hr-line);
}

.hrapp-tab {
  border: 0;
  border-right: 1px solid var(--hr-line);
  border-radius: 0;
  background: #f9fbfd;
  color: var(--hr-muted);
  font-weight: 900;
}

.hrapp-tab.active {
  background: var(--hr-orange);
  color: #fff;
}

.hrapp-metrics {
  gap: 1px;
  background: var(--hr-line);
  border-bottom-color: var(--hr-line);
}

.hrapp-metric,
.hrapp-card,
.hrapp-panel,
.hrapp-detail,
.hrapp-row-button,
.hrapp-resource,
.hrapp-info,
.hrapp-step {
  background: #fff;
  border-color: var(--hr-line);
  box-shadow: 0 12px 26px rgba(20, 42, 70, .06);
}

.hrapp-body {
  padding: 16px;
}

.hrapp-input,
.hrapp-select,
.hrapp-textarea {
  background: #fff;
  border-color: var(--hr-line);
  color: var(--hr-ink);
}

.hrapp-input:focus,
.hrapp-select:focus,
.hrapp-textarea:focus {
  border-color: var(--hr-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.hrapp-button {
  background: #fff;
  border-color: var(--hr-line);
  color: var(--hr-ink);
}

.hrapp-button.primary,
.hrapp-tab.active {
  background: var(--hr-orange);
  border-color: var(--hr-orange);
  color: #fff;
}

.hrapp-button.primary:hover {
  background: var(--hr-orange-dark);
}

.hrapp-row-button.active {
  border-color: var(--hr-orange);
  background: #fff7ed;
  box-shadow: inset 4px 0 0 var(--hr-orange);
}

.hrapp-table th {
  background: #f1f5f9;
  color: var(--hr-muted);
}

.hrapp-table td {
  border-bottom-color: #e0e7ef;
  color: var(--hr-ink);
}

.hrapp-progress {
  background: #e7edf5;
}

.hrapp-ai-box {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  color: var(--hr-ink);
  background: #f8fafc;
  border: 1px solid var(--hr-line);
  border-left: 4px solid #16a34a;
  border-radius: 8px;
}

.hrapp-ai-box.blocked {
  border-left-color: #dc2626;
  background: #fff7ed;
}

.hrapp-ai-box b {
  color: var(--hr-ink);
}

.hrapp-ai-box p,
.hrapp-ai-box ul {
  margin: 0;
  color: var(--hr-muted);
}

.hrapp-badge-layout {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(560px, 1.28fr);
  gap: 16px;
}

.hrapp-notice {
  display: grid;
  gap: 4px;
  margin: 14px 0;
  padding: 12px 14px;
  color: #5f3818;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 4px solid var(--hr-orange);
  border-radius: 8px;
}

.hrapp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hrapp-form-grid .full {
  grid-column: 1 / -1;
}

.hrapp-inline-status {
  min-height: 44px;
  margin-top: 12px;
  padding: 11px 12px;
  color: var(--hr-muted);
  background: #f8fafc;
  border: 1px solid var(--hr-line);
  border-radius: 7px;
}

.hrapp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
}

.hrapp-badge-preview-panel h2 {
  margin-bottom: 14px;
}

.hrapp-badge-sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 18px;
  align-items: start;
}

.hrapp-badge-card {
  position: relative;
  width: 100%;
  aspect-ratio: 0.63;
  overflow: hidden;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
}

.hrapp-badge-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.hrapp-badge-photo {
  position: absolute;
  top: 37.4%;
  left: 22.1%;
  width: 55.8%;
  height: 35.8%;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #64748b;
  background: #e5e7eb;
}

.hrapp-badge-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hrapp-badge-identity {
  position: absolute;
  top: 76.3%;
  left: 12%;
  width: 76%;
  min-height: 8.5%;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 3px;
  color: #111;
  text-align: center;
  background: #fff;
}

.hrapp-badge-identity strong {
  overflow-wrap: anywhere;
  font-size: clamp(12px, 1.7vw, 25px);
  line-height: 1.05;
  text-transform: uppercase;
}

.hrapp-badge-identity span {
  font-size: clamp(8px, 1.05vw, 15px);
}

@media (max-width: 1050px) {
  .hrapp-badge-layout,
  .hrapp-badge-sheet {
    grid-template-columns: 1fr;
  }

  .hrapp-badge-sheet {
    max-width: 520px;
    margin-inline: auto;
  }
}

@media (max-width: 620px) {
  .hrapp-form-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  body.onefsg-badge-printing * {
    visibility: hidden !important;
  }

  body.onefsg-badge-printing #hrBadgePrintArea,
  body.onefsg-badge-printing #hrBadgePrintArea * {
    visibility: visible !important;
  }

  body.onefsg-badge-printing #hrBadgePrintArea {
    position: fixed;
    inset: 0;
    grid-template-columns: repeat(2, 2.125in);
    gap: .25in;
    width: 4.5in;
    margin: .25in auto;
  }

  body.onefsg-badge-printing .hrapp-badge-card {
    width: 2.125in;
    height: 3.375in;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
  }

  body.onefsg-badge-printing .hrapp-badge-identity strong {
    font-size: 10pt;
  }

  body.onefsg-badge-printing .hrapp-badge-identity span {
    font-size: 6pt;
  }
}

/* V8.3.8 Fix 2: performance-review visibility and compact manager layout */
.hrapp-review-submission, .hrapp-manager-self-review { border: 1px solid #d4dee9; border-radius: 8px; background: #f8fbfe; padding: 14px; margin: 0 0 14px; }
.hrapp-review-submission-head, .hrapp-manager-self-review-head { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
.hrapp-review-submission-head span, .hrapp-manager-self-review-head span { display:block; color:#607185; font-size:12px; margin-top:3px; }
.hrapp-review-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.hrapp-review-summary { min-width:0; border:1px solid #dbe3ec; border-radius:7px; background:#fff; padding:11px; }
.hrapp-review-summary > span { display:block; color:#607185; font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.hrapp-review-summary > div { color:#172235; white-space:normal; overflow-wrap:anywhere; }
.hrapp-split { grid-template-columns:minmax(260px,.55fr) minmax(0,1.45fr); align-items:start; }
.hrapp-list { max-height:520px; align-content:start; }
.hrapp-row-button { align-self:start; }
.hrapp-detail { min-width:0; overflow:hidden; }
.hrapp-detail-head { flex-wrap:wrap; }
@media (max-width:900px) { .hrapp-review-summary-grid { grid-template-columns:1fr; } }

/* OneFSG V8.4.17.7.41 HR lifecycle, visibility-preview, and SQL-state integrity */
.hrapp-preview-boundary,
.hrapp-persistence-status {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
}
.hrapp-preview-boundary { background: #eef6ff; border: 1px solid #bfdbfe; color: #1e3a5f; }
.hrapp-preview-boundary b,
.hrapp-persistence-status b { white-space: nowrap; }
.hrapp-persistence-status { background: #f8fafc; border: 1px solid #cbd5e1; color: #475569; }
.hrapp-persistence-status.pending,
.hrapp-persistence-status.saving,
.hrapp-persistence-status.loading { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.hrapp-persistence-status.saved { background: #ecfdf5; border-color: #a7f3d0; color: #166534; }
.hrapp-persistence-status.failed { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.hrapp-employee-card { min-width: 0; border: 1px solid #d4dee9; border-radius: 8px; overflow: hidden; background: #fff; }
.hrapp-employee-card.active { border-color: #ff5a00; box-shadow: 0 0 0 2px rgba(255,90,0,.12); }
.hrapp-employee-card .hrapp-row-button { border: 0; border-radius: 0; }
.hrapp-employee-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 12px; border-top: 1px solid #e2e8f0; background: #f8fafc; }
.hrapp-button.compact { padding: 7px 10px; font-size: 12px; }
.hrapp-button:disabled { opacity: .45; cursor: not-allowed; }
.hrapp-employee-editor { padding: 14px; border: 1px solid #bfdbfe; border-left: 4px solid #2563eb; border-radius: 8px; background: #f8fbff; }
.hrapp-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hrapp-editor-heading h3 { margin: 0; }
.hrapp-editor-heading p { margin: 4px 0 0; }
.hrapp-table-subtext { color: #607185; font-size: 12px; }
@media (max-width: 760px) {
  .hrapp-preview-boundary,
  .hrapp-persistence-status { flex-direction: column; gap: 4px; }
  .hrapp-directory-grid { grid-template-columns: 1fr; }
}

.hrapp-directory-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.hrapp-preview-readonly { margin-bottom: 14px; }