/* HR OS — shared utility styles
 * Small set of component-y classes that are easier to read than long
 * Tailwind class strings. These use raw color values (matching the tokens
 * in tailwind-config.js) so they work without the Tailwind JIT @apply
 * machinery (the Play CDN doesn't process external stylesheets).
 */

/* ---- Body baseline ---- */
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1A1816;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
input, button, select, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: #9A968F; }

/* ---- Left nav items ---- */
.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #3A3833;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-link:hover { background: rgba(0,0,0,0.03); }
.nav-link.is-active { color: #DC2626; font-weight: 600; }
.nav-link .nav-icon { color: #6B6862; display: inline-flex; }
.nav-link.is-active .nav-icon { color: #DC2626; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 6px;
  font-size: 12.5px; font-weight: 500;
  cursor: pointer; border: 1px solid transparent;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  white-space: nowrap;
}
.btn-ghost   { background: #fff; border-color: #DDD8CE; color: #1A1816; }
.btn-ghost:hover { background: #FBFAF7; }
.btn-primary { background: #1A1816; border-color: #1A1816; color: #fff; }
.btn-primary:hover { background: #2E2A24; border-color: #2E2A24; }
.btn-accent  { background: #DC2626; border-color: #DC2626; color: #fff; }
.btn-accent:hover { background: #B91C1C; border-color: #B91C1C; }
.btn-link    { color: #DC2626; font-weight: 500; padding: 0; background: transparent; }

/* ---- Inputs ---- */
.input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #DDD8CE;
  border-radius: 6px;
  background: #fff;
  color: #1A1816;
  font-size: 13px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus { border-color: #1A1816; box-shadow: 0 0 0 3px rgba(26,24,22,0.06); }
.input[disabled], .input:disabled { background: #FBFAF7; color: #7A766F; }

textarea.input { height: auto; padding: 10px 12px; resize: vertical; min-height: 80px; }

.label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #3A3833;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.help { font-size: 11.5px; color: #7A766F; margin-top: 4px; }

/* ---- Status pill ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 3px; }
.pill-active      { background: #E7F3EC; color: #0F7A3C; }
.pill-active .dot { background: #1F9D55; }
.pill-leave       { background: #FFF3DA; color: #8A5A00; }
.pill-leave .dot  { background: #D89B14; }
.pill-off         { background: #FBE1E1; color: #A02323; }
.pill-off .dot    { background: #D33A3A; }

/* ---- Department chip ---- */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #F4F1EA;
  color: #3A3833;
  font-size: 12px;
  font-weight: 500;
}

/* ---- Filter pill button ---- */
.f-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 6px;
  background: #fff; border: 1px solid #E4DFD4;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.f-pill:hover { background: #FBFAF7; }
.f-pill.is-active { background: #F4F1EA; border-color: #DDD8CE; }
.f-pill .f-label { color: #7A766F; font-weight: 500; }
.f-pill .f-value { color: #3A3833; font-weight: 500; }
.f-pill.is-active .f-value { color: #1A1816; font-weight: 600; }

/* ---- Keyboard chip ---- */
.kbd {
  font-size: 10.5px; color: #7A766F;
  border: 1px solid #E4DFD4; border-radius: 4px;
  padding: 2px 6px; letter-spacing: 0.05em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Popover menu ---- */
.menu {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #EDEAE3;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 4px;
  min-width: 180px;
}
.menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 12.5px;
  color: #1A1816;
  cursor: pointer;
  text-decoration: none;
}
.menu-item:hover { background: #F4F1EA; }
.menu-item.danger { color: #A02323; }
.menu-divider { height: 1px; background: #EDEAE3; margin: 4px 2px; }

/* ---- Group bar (list grouping) ---- */
.group-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px;
  font-size: 12px; color: #1A1816;
  background: #FBFAF7;
  border-bottom: 1px solid #EDEAE3;
  cursor: pointer;
  user-select: none;
}
.group-bar .chev {
  transition: transform .15s;
  color: #7A766F;
  display: inline-flex;
}
.group-bar.is-open .chev { transform: rotate(90deg); }
.group-name { font-weight: 600; }
.group-count { font-size: 11px; color: #7A766F; font-weight: 500; }

/* ---- Table-like flex rows ---- */
.row {
  display: flex; align-items: center;
  padding: 0 8px;
  height: 44px;
  border-bottom: 1px solid #F4F1EA;
  background: #fff;
  font-size: 13px;
  color: #3A3833;
  transition: background .08s;
}
.row:hover { background: #FCFBF7; }
.row .cell {
  display: flex; align-items: center;
  padding: 0 10px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Cards ---- */
.card {
  background: #fff;
  border: 1px solid #EDEAE3;
  border-radius: 8px;
}
.card-head {
  padding: 14px 16px;
  border-bottom: 1px solid #EDEAE3;
  display: flex; align-items: center; justify-content: space-between;
}
.card-title { font-size: 13px; font-weight: 600; color: #1A1816; }
.card-body { padding: 16px; }