:root {
  --tblr-font-sans-serif: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
}

body {
  font-family: var(--tblr-font-sans-serif);
}

[hidden] {
  display: none !important;
}

.employee-width {
  max-width: 62rem;
}

.login-card {
  max-width: 26rem;
  margin-top: clamp(1rem, 8vh, 5rem);
}

.status-card {
  border-top: 3px solid var(--tblr-primary);
}

.status-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-secondary);
  background: var(--tblr-secondary-lt);
}

.status-icon[data-tone="blue"] {
  color: var(--tblr-blue);
  background: var(--tblr-blue-lt);
}

.status-icon[data-tone="green"] {
  color: var(--tblr-green);
  background: var(--tblr-green-lt);
}

.status-icon[data-tone="yellow"] {
  color: var(--tblr-yellow);
  background: var(--tblr-yellow-lt);
}

.folder-location {
  flex: 1 1 20rem;
  min-width: 0;
}

.employee-wrap,
.problem-text {
  overflow-wrap: anywhere;
}

.employee-files {
  table-layout: fixed;
}

.employee-file-list {
  max-height: min(38vh, 25rem);
  overflow: auto;
}

.order-notices-list {
  max-height: 26rem;
  overflow: auto;
}

.employee-files thead th:first-child {
  width: 43%;
}

.employee-files thead th:nth-child(2) {
  width: 27%;
}

.employee-files tbody th {
  font-weight: 500;
}

.employee-time {
  font-variant-numeric: tabular-nums;
}

.problem-text {
  white-space: pre-wrap;
}

summary {
  cursor: pointer;
}