/* 2.7.8 ADD STAFF — wizard (#/hraddstaff), Staff templates, staff file sections + History. Light theme tokens of the app (var(--…)).
   Grid: phone 1 column · tablet 2 · laptop / desktop max 3 fields per row; every box min-width 0 (nothing cut, no side scroll). */
.x278-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 14px; align-items: start; }
.x278-grid.x278-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.x278-grid > .field, .x278-f { min-width: 0; margin: 0 0 8px; }
.x278-f .input, .x278-f select, .x278-f textarea { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; }
.x278-f label.f { white-space: normal; overflow-wrap: anywhere; }
.x278-s2 { grid-column: span 2; }
.x278-s3 { grid-column: 1 / -1; }
.x278-req { color: #b42318; font-weight: 700; font-size: 1em; }
.x278-lock { background: var(--bg2, #f3f4f6); color: var(--muted, #6b7280); letter-spacing: 2px; cursor: not-allowed; }
.x278-h { margin: 12px 0 6px; font-size: 14px; color: var(--muted, #555); font-weight: 700; }
.x278-card { margin-top: 12px; overflow: hidden; }
.x278-card h3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.x278-note { border-inline-start: 4px solid var(--warn, #d97706); }
/* progress bar */
.x278-ph { flex-wrap: wrap; gap: 8px; }
.x278-prog { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; counter-reset: st; }
.x278-st { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: var(--card, #fff); color: inherit; cursor: pointer; font: inherit; font-size: 13px; text-align: start; position: relative; }
.x278-st .x278-n { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--line, #e5e7eb); font-weight: 700; font-size: 12px; }
.x278-st .x278-l { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.x278-st.on { border-color: var(--gold, #b8860b); box-shadow: 0 0 0 2px rgba(184, 134, 11, .18); font-weight: 700; }
.x278-st.on .x278-n { background: var(--gold, #b8860b); color: #fff; }
.x278-st.done .x278-n { background: #16a34a; color: #fff; }
.x278-bar0 { margin: 4px 0 2px; }
.x278-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0 24px; padding: 10px 0; border-top: 1px solid var(--line, #e5e7eb); }
.x278-row2 { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; }
.x278-row2 > * { min-width: 0; }
.x278-fullname { flex: 1 1 220px; }
.x278-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--line, #e5e7eb); display: grid; place-items: center; font-weight: 700; font-size: 24px; }
.x278-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* nationality search box */
.x278-combo { position: relative; }
.x278-combo-list { position: absolute; inset-inline: 0; top: 100%; z-index: 20; max-height: 240px; overflow: auto; background: var(--card, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.x278-opt { padding: 7px 10px; cursor: pointer; }
.x278-opt:hover, .x278-opt.on { background: var(--bg2, #f3f4f6); }
/* pay summary */
.x278-sum { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line, #d1d5db); border-radius: 10px; background: var(--bg2, #fafafa); }
.x278-sumgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.x278-sumgrid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.x278-sumgrid span { font-size: 12px; color: var(--muted, #6b7280); }
.x278-bad { color: #b42318; margin-top: 6px; }
.x278-good { color: #15803d; margin-top: 6px; }
.x278-warn { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: #fff7ed; color: #9a3412; }
/* documents: one row per document (5 columns on a laptop, stacked on a phone) */
.x278-docs { display: flex; flex-direction: column; gap: 6px; }
.x278-doc { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line, #eee); }
.x278-doc > * { min-width: 0; }
.x278-doc .input { width: 100%; box-sizing: border-box; min-width: 0; }
.x278-dochead { font-size: 12px; font-weight: 700; color: var(--muted, #6b7280); border-bottom: 2px solid var(--line, #e5e7eb); }
.x278-dt { overflow-wrap: anywhere; font-size: 13px; }
.x278-dl { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; }
.x278-dlab { display: none; font-size: 11px; color: var(--muted, #6b7280); }
.x278-file { flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; }
.x278-file .btn { position: relative; }
/* dependants */
.x278-deps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.x278-dep { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto auto auto; gap: 8px; align-items: end; padding: 6px 0; border-bottom: 1px solid var(--line, #eee); }
.x278-dep > * { min-width: 0; }
.x278-dep .x278-dlab { display: block; }
.x278-chk { display: flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; margin-bottom: 8px; }
/* review */
.x278-rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
.x278-rv { display: flex; flex-direction: column; min-width: 0; padding: 4px 0; border-bottom: 1px dotted var(--line, #e5e7eb); }
.x278-rv span { font-size: 12px; color: var(--muted, #6b7280); }
.x278-rv b { overflow-wrap: anywhere; font-weight: 600; }
.x278-wl { margin: 4px 0; padding-inline-start: 18px; }
.x278-wl li { margin: 4px 0; }
.x278-drafts { display: flex; flex-direction: column; gap: 6px; }
.x278-draft { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line, #eee); }
/* templates */
.x278-cats { display: flex; flex-direction: column; gap: 6px; }
.x278-cat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; max-width: 620px; }
.x278-modalgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.x278-modalgrid > .field { min-width: 0; }
.x278-modalgrid .input { width: 100%; box-sizing: border-box; }
/* staff file sections */
.x278-secs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 6px; }
.x278-secs-t { font-size: 12px; font-weight: 700; color: var(--muted, #6b7280); margin-inline-end: 4px; flex: 0 0 100%; }
.x278-secs button { border: 1px solid var(--line, #e5e7eb); background: var(--card, #fff); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; color: inherit; }
.x278-secs button.on { background: var(--gold, #b8860b); border-color: var(--gold, #b8860b); color: #fff; font-weight: 700; }
.x278-oldtabs { margin-top: 2px; }
.x278-all { opacity: .75; }
.x278-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.x278-chips .chip { text-decoration: none; }
.x278-saverow { margin-top: 10px; }
.x278-tl { list-style: none; margin: 0; padding: 0; border-inline-start: 3px solid var(--line, #e5e7eb); }
.x278-hrow { margin: 0 0 12px; padding: 4px 0 4px 14px; padding-inline-start: 14px; position: relative; }
.x278-hrow::before { content: ""; position: absolute; inset-inline-start: -8px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold, #b8860b); }
.x278-hrow ul { margin: 4px 0 0; padding-inline-start: 16px; font-size: 13px; }
.x278-hrow li { overflow-wrap: anywhere; }
.x278-old { color: var(--muted, #6b7280); text-decoration: line-through; }
@media (max-width: 1100px) {
  .x278-grid, .x278-rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x278-s3, .x278-s2 { grid-column: 1 / -1; }
  .x278-sumgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x278-st .x278-l { font-size: 12px; }
}
@media (max-width: 860px) {
  .x278-st { flex: 0 0 auto; padding: 6px 8px; }
  .x278-st:not(.on) .x278-l { display: none; }
  .x278-doc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x278-doc .x278-dt { grid-column: 1 / -1; }
  .x278-dochead { display: none; }
  .x278-dlab { display: block; }
  .x278-dep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .x278-grid, .x278-grid.x278-g2, .x278-rgrid, .x278-modalgrid { grid-template-columns: minmax(0, 1fr); }
  .x278-sumgrid { grid-template-columns: minmax(0, 1fr); }
  .x278-doc { grid-template-columns: minmax(0, 1fr); }
  .x278-cat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .x278-nav .btn { flex: 1 1 auto; }
}
.x278-f input[type="date"], .x278-doc input[type="date"], .x278-dep input[type="date"] { text-align: left; }
@media (max-width: 860px) {
  .x278-prog { gap: 4px; }
  .x278-st { padding: 4px 5px; gap: 4px; }
}
.x278-rv > b, .x278-sumgrid > div > b { align-self: flex-start; max-width: 100%; }