/* Approvals OS — shared utility styles (stripped copy of HR OS styles.css;
 * same values, same look — keep the two in step if HR OS re-skins).
 * 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; }

/* ---- Page canvas + content card (2026-06 design refresh) ----
   Soft paper canvas with a whisper of dot-grid texture; page content sits
   in a white card with a hairline border. Apply `page-canvas` on <body>,
   wrap the main content in `.page-card`, and lead the page header with a
   `.page-title-icon` chip. */
body.page-canvas {
  background-color: #F7F5F0;
  background-image: radial-gradient(rgba(122,118,111,0.13) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
.page-card {
  background: #fff;
  border: 1px solid #E8E3D9;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(28,24,18,0.04), 0 12px 32px -20px rgba(28,24,18,0.10);
  padding: 14px 16px 12px;
}
@media (max-width: 767px) { .page-card { padding: 10px 10px 12px; border-radius: 10px; } }
.page-title-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: #fff; border: 1px solid #E8E3D9;
  display: inline-flex; align-items: center; justify-content: center;
  color: #3A3833; flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(28,24,18,0.05);
}

/* ---- Left nav items ---- */
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #3A3833;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-link:hover { background: #F4F1EA; }
.nav-link.is-active { background: #F4F1EA; color: #1A1816; font-weight: 600; }
/* Expandable parents (none in Approvals OS yet — kept for parity) are <button>s — must
   match the <a> nav-links exactly. Inherit only the font-FAMILY; a bare
   `font: inherit` shorthand would also reset font-size/weight to the inherited
   16px/400, making the expandable items render larger than the plain links. */
button.nav-link {
  width: 100%;
  border: 0; background: transparent;
  font-family: inherit; text-align: left;
  cursor: pointer;
}
button.nav-link:hover { background: #F4F1EA; }
.nav-link .nav-icon { color: #6B6862; display: inline-flex; }
.nav-link:hover .nav-icon { color: #3A3833; }
.nav-link.is-active .nav-icon { color: #DC2626; }
/* Nav icons ~15% smaller than their intrinsic 18px (CSS overrides the svg
   width/height attributes). Chevrons (.nav-group-chevron) are unaffected. */
.nav-icon svg { width: 15px; height: 15px; }

/* Small-caps group labels between nav sections */
.nav-section-label {
  padding: 16px 12px 5px;
  font-size: 10.5px; font-weight: 600;
  color: #9A968F;
  letter-spacing: 0.08em; text-transform: uppercase;
  user-select: none;
}

/* ---- Nav sub-items (auto-expanded under the active parent) ----
   Indented past the parent icon with a hairline tree rail; the active
   sub-item gets a red tick on the rail. */
.nav-group-chevron { margin-left: auto; color: #9A968F; transition: transform .15s; }
.nav-group-chevron.is-open { transform: rotate(180deg); }
.nav-subwrap { position: relative; margin: 1px 0 3px; }
.nav-subwrap::before {
  content: '';
  position: absolute; left: 19px; top: 3px; bottom: 3px;
  width: 1px; background: #E7E2D8;
}
.nav-sublink {
  display: flex; align-items: center;
  position: relative;
  padding: 6px 10px 6px 34px;       /* indent past the parent icon */
  border-radius: 7px;
  font-size: 12.5px; font-weight: 500;
  color: #6B6862; text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-sublink:hover { background: #F4F1EA; color: #1A1816; }
.nav-sublink.is-active { background: #F4F1EA; color: #1A1816; font-weight: 600; }
.nav-sublink.is-active::before {
  content: '';
  position: absolute; left: 19px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 1px;
  background: #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;
}

/* ---- 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; }

/* ---- 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;
}

/* ---- Toast ---- */
.toast-stack {
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  min-width: 260px; max-width: 420px;
  background: #1A1816; color: #fff;
  border-radius: 6px; padding: 10px 14px;
  font-size: 13px; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  display: flex; gap: 10px; align-items: flex-start;
  pointer-events: auto;
}
.toast.success { background: #0F7A3C; }
.toast.error { background: #A02323; }

/* ---- 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; }

/* ---- Indeterminate progress bar ---- */
/* Thin accent-red bar that slides back and forth while data loads. */
.progress-bar {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: #EDEAE3;
  overflow: hidden;
}
.progress-bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 40%;
  border-radius: 999px;
  background: #DC2626;
  animation: progress-indeterminate 1.1s ease-in-out infinite;
}
@keyframes progress-indeterminate {
  0%   { left: -40%; }
  100% { left: 100%; }
}


/* ---- Mobile list cards (Queue + Rules lists, below md:) ----
   List pages render as cards on small screens instead of a clipped
   desktop table. Title is the hero; secondary fields are full-width labelled
   lines (.p-card-field + .p-card-k). */
.p-card {
  display: block;
  background: #fff;
  border: 1px solid #EDEAE3;
  border-radius: 8px;
  padding: 12px 14px;
  text-decoration: none;
  color: #3A3833;
  transition: background .08s, border-color .08s;
}
.p-card:hover { background: #FCFBF7; border-color: #DDD8CE; }
.p-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.p-card-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: #1A1816;
  flex-shrink: 0;
}
.p-card-name { font-size: 15px; font-weight: 600; color: #1A1816; line-height: 1.2; }
.p-card-email { font-size: 12px; color: #7A766F; margin-top: 2px; word-break: break-all; }
.p-card-meta { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.p-card-title-main { font-size: 14px; font-weight: 600; color: #1A1816; line-height: 1.25; }
.p-card-title-sub  { font-size: 12px; color: #7A766F; line-height: 1.3; margin-top: 1px; }
.p-card-field { font-size: 12.5px; color: #3A3833; line-height: 1.35; }
.p-card-k {
  color: #9A968F; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 600; margin-right: 7px;
}

.pop { background: #fff; border: 1px solid #EDEAE3; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04); padding: 6px; min-width: 120px; max-height: 320px; overflow-y: auto; }
.pop-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; font-size: 12.5px; color: #1A1816; cursor: pointer; }
.pop-item:hover { background: #F4F1EA; }

/* ============================================================
   Approvals OS additions — built only from HR OS values.
   ============================================================ */

/* ---- Status tabs (queue) — same look as HR OS's .org-tab ---- */
.status-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.status-tabs::-webkit-scrollbar { display: none; }
.status-tab {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid #EDEAE3; background: #fff; color: #3A3833;
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background .1s, border-color .1s, color .1s;
}
.status-tab:hover { background: #F4F1EA; border-color: #DDD8CE; }
.status-tab.is-active { background: #1A1816; border-color: #1A1816; color: #fff; }
.status-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: #F4F1EA; color: #7A766F;
  font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.status-tab.is-active .status-tab-count { background: rgba(255,255,255,0.16); color: #fff; }
@media (max-width: 767px) { .status-tab { height: 44px; } }

/* ---- List column headers (pairs with .row/.cell) ---- */
.col-head {
  display: flex; align-items: center;
  padding: 0 10px; min-width: 0;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #7A766F;
}

/* ---- Key/value pairs on detail cards (as HR OS employee.html) ---- */
.kv-label { font-size: 11px; color: #7A766F; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 3px; }
.kv-value { font-size: 14px; color: #1A1816; overflow-wrap: anywhere; }
.kv-value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.kv-value.muted { color: #9A968F; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---- Small uppercase badge ---- */
.badge-sm {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---- Audit / activity rows (as HR OS activity.html) ---- */
.audit-row { padding: 12px 16px; border-bottom: 1px solid #EDEAE3; transition: background .08s; }
.audit-row:last-child { border-bottom: none; }
.audit-row:hover { background: #FBFAF7; }
.audit-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0; margin-top: 1px;
  background: #F4F1EA; color: #3A3833;
}

/* ---- Untrusted email text (never HTML) ---- */
.email-text {
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 13px; line-height: 1.55; color: #3A3833;
  background: #FBFAF7; border: 1px solid #EDEAE3; border-radius: 6px;
  padding: 12px 14px; max-height: 420px; overflow-y: auto; margin: 0;
  font-family: inherit;
}

/* ---- Warning banner (test mode etc.) ---- */
.banner-warn {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-radius: 8px;
  background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F;
  font-size: 13px; line-height: 1.45;
}