.hrms-workspace {
  display: grid;
  /* Keep the wide register table inside its own scroll area on small screens. */
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.hrms-connection {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
}
.hrms-connection > .icon {
  width: 30px;
  height: 30px;
  flex: none;
}
.hrms-connection p {
  font-size: 15px;
  line-height: 1.6;
  margin: 6px 0 0;
}
.hrms-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.hrms-metrics article {
  display: grid;
  gap: 14px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
}
.hrms-metrics span {
  font-size: 14px;
}
.hrms-metrics strong {
  font-size: 30px;
}
.hrms-notice {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--accent-soft);
}
.hrms-row-actions {
  min-width: 170px;
}
.hrms-row-actions summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 600;
  font-size: 14px;
}
.hrms-row-actions > div {
  display: grid;
  gap: 8px;
  padding: 8px 0;
}
.hrms-row-actions button {
  font-size: 14px;
  min-height: 44px;
}
.hrms-warning {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--accent-soft);
}
.hrms-warning > .icon {
  flex: none;
  margin-top: 4px;
}
.hrms-warning p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}
.hrms-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* Full-viewport Fenyr welcome: an original interactive field, not a product replica. */
.welcome-space.immersive-space {
  --intro-ink: #163a53;
  --intro-muted: #486577;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.85fr);
  gap: clamp(32px, 7vw, 130px);
  align-content: center;
  align-items: center;
  justify-content: center;
  place-items: initial;
  padding: clamp(28px, 5vw, 88px);
  background: #eaf4f8;
  color: var(--intro-ink);
  overflow: clip;
  min-height: 100dvh;
}
.space-point-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.space-introduction {
  width: 100%;
  max-width: 780px;
  justify-self: end;
  padding: 36px 0;
  position: relative;
}
.space-introduction > img {
  object-fit: contain;
  margin-bottom: 36px;
}
.immersive-space .space-introduction .welcome-brand {
  font-size: 13px;
  color: var(--intro-muted);
  letter-spacing: 0.18em;
  margin-bottom: 24px;
}
.space-introduction h2 {
  font-size: clamp(40px, 4.7vw, 78px);
  font-weight: 550;
  letter-spacing: -0.055em;
  line-height: 1.08;
  margin: 0;
  color: var(--intro-ink);
}
.space-introduction h2 span {
  color: #0072bc;
}
.space-intro-description {
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.6;
  color: var(--intro-muted);
  margin: 24px 0 32px;
}
.space-motion-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff60;
  border: 1px solid #acc8d988;
  border-radius: 24px;
  padding: 12px 16px;
  min-height: 44px;
  color: var(--intro-muted);
  font-size: 14px;
}
.space-motion-control:hover {
  background: #ffffffad;
}
.immersive-space .sign-in-window {
  justify-self: start;
  width: min(460px, 100%);
  padding: 30px 32px 22px;
  border: 1px solid #fff9;
  border-radius: 28px;
  box-shadow:
    0 24px 80px #17476112,
    inset 0 1px #fff;
  background: linear-gradient(140deg, #fff8, #ffffff38);
  backdrop-filter: blur(22px);
  transform: none;
  transition: none;
  color: var(--intro-ink);
}
.immersive-space .welcome-topline img {
  width: 32px;
  height: 32px;
  filter: none;
}
.immersive-space .welcome-personalise {
  color: var(--intro-ink);
  border-color: #adc7d66b;
  background: #ffffff65;
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
}
.immersive-space .sign-in-window .welcome-content {
  padding: 20px 0 12px;
  text-align: left;
}
.immersive-space .sign-in-window .welcome-brand {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--intro-muted);
  margin: 0 0 12px;
}
.immersive-space .welcome-content h1 {
  font-size: 30px;
  line-height: 1.18;
  color: var(--intro-ink);
  letter-spacing: -0.035em;
}
.immersive-space .welcome-description {
  color: var(--intro-muted);
  font-size: 16px;
}
.immersive-space .welcome-help {
  color: var(--intro-muted);
  text-align: left;
  font-size: 14px;
}
.immersive-space .space-login-form :is(input, select) {
  background: #fff9;
  border-color: #b6cedc;
  color: var(--intro-ink);
}
.immersive-space .space-login-form input::placeholder {
  color: var(--intro-muted);
}
.immersive-space .welcome-enter {
  background: #0072bc;
  color: white;
  border-color: #0072bc;
  box-shadow: 0 6px 18px #0072bc20;
}
.immersive-space .welcome-enter:hover {
  background: #005f9f;
}
.immersive-space .welcome-window-footer,
.immersive-space .welcome-preview {
  color: var(--intro-muted);
}
.immersive-space .sample-account-grid button {
  background: #fff5;
  border-color: #a6c4d488;
}
.immersive-space .welcome-window-footer {
  border-color: #b7ced9;
}
.immersive-space .login-error {
  background: #fff0ed;
  color: #94392e;
  border-color: #e0b1aa;
}
:root[data-theme="dark"] .immersive-space {
  --intro-ink: #e4f3fb;
  --intro-muted: #b4cbd9;
  background: #071b2b;
}
:root[data-theme="dark"] .immersive-space .sign-in-window {
  border-color: #a4c5e029;
  background: linear-gradient(140deg, #ffffff0b, #ffffff04);
  box-shadow:
    0 24px 80px #0003,
    inset 0 1px #ffffff13;
}
:root[data-theme="dark"] .immersive-space .space-login-form :is(input, select) {
  background: #0b253a;
  border-color: #476274;
}
:root[data-theme="dark"] .space-motion-control,
:root[data-theme="dark"] .immersive-space .welcome-personalise,
:root[data-theme="dark"] .immersive-space .sample-account-grid button {
  background: #ffffff08;
  border-color: #7698b149;
}
:root[data-theme="dark"] .space-introduction h2 span {
  color: #6dcff6;
}
:root[data-glass="off"] .immersive-space .sign-in-window {
  backdrop-filter: none;
  background: var(--surface);
}
.immersive-space[data-motion="on"] .space-introduction,
.immersive-space[data-motion="on"] .sign-in-window {
  animation: space-arrive 0.8s ease-out both;
}
.immersive-space[data-motion="on"] .sign-in-window {
  animation-delay: 0.1s;
}
@keyframes space-arrive {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (min-width: 1800px) {
  .welcome-space.immersive-space {
    grid-template-columns: minmax(0, 740px) minmax(0, 460px);
  }
}
@media (max-width: 850px) {
  .welcome-space.immersive-space {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 28px 20px;
    align-content: start;
  }
  .space-introduction {
    max-width: 460px;
    justify-self: center;
    padding: 12px 0;
  }
  .space-introduction > img {
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
  }
  .space-introduction h2 {
    font-size: 36px;
  }
  .space-intro-description {
    margin: 14px 0;
  }
  .space-motion-control {
    font-size: 13px;
  }
  .immersive-space .sign-in-window {
    justify-self: center;
    padding: 24px;
  }
  .immersive-space .space-introduction .welcome-brand {
    margin-bottom: 14px;
  }
  .hrms-form-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .hrms-metrics {
    grid-template-columns: 1fr;
  }
  .hrms-metrics article {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 18px;
  }
  .hrms-connection {
    align-items: flex-start;
    padding: 18px;
  }
  .space-introduction h2 {
    font-size: 32px;
  }
  .immersive-space .welcome-content h1 {
    font-size: 27px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .immersive-space .space-introduction,
  .immersive-space .sign-in-window {
    animation: none !important;
  }
  .space-motion-control {
    display: none;
  }
}

/* Header action group in the employee register (Import CSV / Add employee). */
.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}