/* Payroll frontend — one layout, one accent colour, system fonts (FE-06). */
:root {
  --brand-color: #0d6efd;
  --bg-color: #f5f7fa;
  --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-stack-cjk: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
}

html { font-family: var(--font-stack); }
/* Chinese: a stack that renders CJK cleanly on iOS / Android (FE-21). */
html[lang="zh"] { font-family: var(--font-stack-cjk); }
html[lang="zh"] body { font-family: var(--font-stack-cjk); }

body {
  background-color: var(--bg-color);
  padding-bottom: 3rem;
  min-height: 100vh;
}

.navbar-brand { letter-spacing: 0.02em; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.page-header h1 { font-size: 1.5rem; font-weight: 600; margin: 0; }

.card { border: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.card-header { background-color: #fff; font-weight: 600; border-bottom: 1px solid #eee; }

.table thead th {
  white-space: nowrap;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6c757d;
}
.table td, .table th { vertical-align: middle; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.status-badge { text-transform: capitalize; }
.mono { font-variant-numeric: tabular-nums; }

#alertContainer {
  position: fixed;
  top: 1rem;
  right: 1rem;
  left: 1rem;
  z-index: 1080;
  pointer-events: none;
}
#alertContainer .alert { pointer-events: auto; max-width: 420px; margin-left: auto; }

/* Touch targets ≥ 44 px on coarse pointers (FE-12). */
@media (pointer: coarse) {
  .btn, .form-control, .form-select, .nav-link, .dropdown-item, .page-link { min-height: 44px; }
  .btn-sm { min-height: 44px; }
}

/* Key-value blocks (run header, employee summary). */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; }
.kv dt { font-weight: 500; color: #6c757d; }
.kv dd { margin: 0; }

.stat-card .stat-value { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.stat-card .stat-label { font-size: 0.85rem; color: #6c757d; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { width: 100%; max-width: 400px; }

.warnings li { margin-bottom: 0.25rem; }
.hidden { display: none !important; }
.row-link { cursor: pointer; }
.row-link:hover { background-color: rgba(13, 110, 253, 0.05); }
textarea.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; }

/* Wide tables: below 768 px rows collapse to stacked cards; each cell shows
   its column label from data-label (FE-11). Primary cells (.primary) stay bold. */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack tbody tr {
    display: block;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
  }
  .table-stack tbody tr.empty-row { border: none; background: transparent; }
  .table-stack tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border: none;
    padding: 0.3rem 0;
    text-align: right;
  }
  .table-stack tbody td.empty-cell { display: block; text-align: center; }
  .table-stack tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
    text-align: left;
    flex: 0 0 40%;
  }
  .table-stack tbody td.primary { font-weight: 600; }
  .table-stack tbody td.actions { justify-content: flex-end; }
  .table-stack tbody td.actions::before { content: none; }
  .page-header h1 { font-size: 1.3rem; }
}