/* ==========================================================================
   AI WORKFORCE — App styles (Phase 2). Built on brand.css tokens.
   ========================================================================== */
body { min-height: 100vh; }

.wf-app { max-width: 1180px; margin: 0 auto; padding: 0 22px 80px; }

.wf-app-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 14, 20, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--wf-line-soft);
}
.wf-app-header-inner {
  max-width: 1180px; margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.wf-app-header .wf-brand { font-size: 1rem; }
.wf-biz-picker { display: flex; align-items: center; gap: 10px; }
.wf-biz-picker select {
  background: var(--wf-bg-softer); color: var(--wf-text);
  border: 1px solid var(--wf-line); border-radius: 999px;
  padding: 8px 16px; font: inherit; font-size: 0.9rem; cursor: pointer;
}
.wf-user-chip { font-size: 0.85rem; color: var(--wf-text-faint); }
.wf-link-btn {
  background: none; border: 0; color: var(--wf-text-dim); font: inherit;
  font-size: 0.85rem; cursor: pointer; padding: 6px 8px;
}
.wf-link-btn:hover { color: var(--wf-text); text-decoration: underline; }

.wf-view-title { font-family: var(--wf-font-display); font-weight: 800; font-size: 1.9rem; margin: 30px 0 6px; }
.wf-view-sub { color: var(--wf-text-dim); margin: 0 0 26px; }

/* ---- Auth gate ---- */
.wf-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.wf-auth-card { width: 100%; max-width: 420px; text-align: center; }
.wf-auth-card .wf-logo-mark { width: 56px; height: 56px; margin: 0 auto 14px; }
.wf-auth-card h1 { font-family: var(--wf-font-display); font-weight: 900; font-size: 1.7rem; margin: 0 0 6px; }
.wf-auth-card p { color: var(--wf-text-dim); font-size: 0.95rem; margin: 0 0 22px; }
.wf-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
.wf-tab { background: none; border: 1px solid var(--wf-line); color: var(--wf-text-dim); border-radius: 999px; padding: 8px 22px; font: inherit; font-size: 0.9rem; cursor: pointer; }
.wf-tab.active { background: var(--wf-accent-dim); border-color: var(--wf-accent); color: var(--wf-accent); font-weight: 700; }
.wf-field { text-align: left; margin-bottom: 14px; }
.wf-field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--wf-text-dim); margin-bottom: 6px; }
.wf-field input, .wf-field select, .wf-field textarea {
  width: 100%; background: var(--wf-bg-softer); border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius-sm); color: var(--wf-text); font: inherit; font-size: 0.95rem;
  padding: 12px 14px;
}
.wf-field input:focus, .wf-field select:focus, .wf-field textarea:focus {
  outline: none; border-color: var(--wf-accent); box-shadow: 0 0 0 3px var(--wf-accent-dim);
}
.wf-field textarea { min-height: 88px; resize: vertical; }
.wf-form-error { color: var(--wf-red); font-size: 0.88rem; min-height: 1.4em; margin: 8px 0 0; }
.wf-form-note { color: var(--wf-text-faint); font-size: 0.82rem; margin: 10px 0 0; }
.wf-btn-block { width: 100%; }

/* ---- Dashboard grid ---- */
.wf-dash-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
@media (max-width: 960px) { .wf-dash-grid { grid-template-columns: 1fr; } }
.wf-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 14px; }
.wf-section-head h2 { font-family: var(--wf-font-display); font-weight: 800; font-size: 1.25rem; margin: 0; }
.wf-section-head .count { font-family: var(--wf-font-mono); font-size: 0.8rem; color: var(--wf-text-faint); }

/* ---- Employee cards ---- */
.wf-crew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.wf-emp-card {
  background: var(--wf-bg-soft); border: 1px solid var(--wf-line-soft);
  border-radius: var(--wf-radius); padding: 20px; cursor: pointer;
  transition: transform 0.15s var(--wf-ease), border-color 0.15s var(--wf-ease);
}
.wf-emp-card:hover { transform: translateY(-3px); border-color: var(--wf-line); }
.wf-emp-card .row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wf-emp-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 48px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--wf-font-display); font-weight: 800; font-size: 1.3rem; color: #04120a;
}
.wf-emp-card .name { font-family: var(--wf-font-display); font-weight: 800; font-size: 1.1rem; }
.wf-emp-card .role { font-size: 0.82rem; color: var(--wf-text-faint); }
.wf-emp-card .tagline { font-size: 0.88rem; color: var(--wf-text-dim); margin: 0 0 12px; min-height: 2.6em; }
.wf-pill {
  display: inline-block; font-family: var(--wf-font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--wf-line);
  color: var(--wf-text-dim); text-transform: uppercase;
}
.wf-pill.on { border-color: var(--wf-accent); color: var(--wf-accent); background: var(--wf-accent-dim); }
.wf-pill.paused { border-color: var(--wf-amber); color: var(--wf-amber); }
.wf-pill.fired { border-color: var(--wf-red); color: var(--wf-red); }
.wf-emp-card .meta { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Activity feed ---- */
.wf-feed { display: flex; flex-direction: column; gap: 0; max-height: 520px; overflow-y: auto; }
.wf-feed-item { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--wf-line-soft); font-size: 0.9rem; }
.wf-feed-item:last-child { border-bottom: 0; }
.wf-feed-item .dot { flex: 0 0 10px; height: 10px; border-radius: 50%; background: var(--wf-line); margin-top: 6px; }
.wf-feed-item .txt { color: var(--wf-text-dim); }
.wf-feed-item .txt b { color: var(--wf-text); font-weight: 600; }
.wf-feed-item .when { display: block; font-family: var(--wf-font-mono); font-size: 0.72rem; color: var(--wf-text-faint); margin-top: 2px; }
.wf-empty { color: var(--wf-text-faint); font-size: 0.92rem; padding: 18px 4px; }

/* ---- Approvals ---- */
.wf-approval {
  background: var(--wf-bg-soft); border: 1px solid var(--wf-line-soft);
  border-radius: var(--wf-radius); padding: 16px; margin-bottom: 12px;
}
.wf-approval .t { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.wf-approval .d { font-size: 0.85rem; color: var(--wf-text-dim); margin-bottom: 12px; }
.wf-approval .from { font-family: var(--wf-font-mono); font-size: 0.72rem; color: var(--wf-text-faint); margin-bottom: 10px; display: block; }
.wf-approval .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wf-mini-btn {
  border: 1px solid var(--wf-line); background: var(--wf-bg-softer); color: var(--wf-text);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 0.82rem; cursor: pointer;
}
.wf-mini-btn:hover { border-color: var(--wf-accent); }
.wf-mini-btn.go { background: var(--wf-accent); border-color: var(--wf-accent); color: #04120a; font-weight: 700; }

/* ---- Side cards ---- */
.wf-side { display: flex; flex-direction: column; gap: 20px; }
.wf-stat-big { font-family: var(--wf-font-display); font-weight: 900; font-size: 2.2rem; margin: 6px 0 2px; }
.wf-stat-big .unit { font-size: 1rem; font-weight: 600; color: var(--wf-text-faint); }
.wf-rec { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--wf-line-soft); font-size: 0.88rem; }
.wf-rec:first-of-type { border-top: 0; }
.wf-rec .ic { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--wf-accent-dim); color: var(--wf-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.wf-rec p { margin: 0; color: var(--wf-text-dim); }
.wf-rec p b { color: var(--wf-text); }

/* ---- 503 banner ---- */
.wf-503 {
  border: 1px dashed var(--wf-amber); background: rgba(247, 144, 61, 0.07);
  border-radius: var(--wf-radius); padding: 18px 22px; margin: 20px 0; font-size: 0.92rem;
}
.wf-503 b { color: var(--wf-amber); }
.wf-503 code { font-family: var(--wf-font-mono); background: var(--wf-bg-softer); padding: 2px 8px; border-radius: 6px; }

/* ---- Employee detail ---- */
.wf-back { margin: 26px 0 0; }
.wf-detail-head { display: flex; gap: 18px; align-items: center; margin: 10px 0 22px; }
.wf-detail-head .wf-emp-avatar { width: 72px; height: 72px; flex-basis: 72px; font-size: 2rem; }
.wf-detail-head h1 { font-family: var(--wf-font-display); font-weight: 900; font-size: 2rem; margin: 0; }
.wf-detail-head .role { color: var(--wf-text-faint); font-size: 0.95rem; }
.wf-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .wf-detail-grid { grid-template-columns: 1fr; } }
.wf-perm { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--wf-line-soft); font-size: 0.9rem; }
.wf-perm:last-child { border-bottom: 0; }
.wf-perm .k { font-family: var(--wf-font-mono); font-size: 0.75rem; }
.wf-perm.can .k { color: var(--wf-accent); }
.wf-perm.cannot .k { color: var(--wf-red); }
.wf-autonomy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wf-auto-opt {
  border: 1px solid var(--wf-line); background: var(--wf-bg-softer); border-radius: var(--wf-radius-sm);
  padding: 14px 8px; text-align: center; cursor: pointer; font: inherit; color: var(--wf-text-dim);
}
.wf-auto-opt b { display: block; font-family: var(--wf-font-display); font-size: 0.95rem; color: var(--wf-text); margin-bottom: 4px; }
.wf-auto-opt span { font-size: 0.75rem; }
.wf-auto-opt.active { border-color: var(--wf-accent); background: var(--wf-accent-dim); color: var(--wf-text); }
.wf-metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.wf-metric { background: var(--wf-bg-softer); border: 1px solid var(--wf-line-soft); border-radius: var(--wf-radius-sm); padding: 14px; text-align: center; }
.wf-metric .v { font-family: var(--wf-font-display); font-weight: 800; font-size: 1.5rem; }
.wf-metric .l { font-size: 0.72rem; color: var(--wf-text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.wf-conv { padding: 10px 0; border-bottom: 1px solid var(--wf-line-soft); font-size: 0.88rem; }
.wf-conv:last-child { border-bottom: 0; }
.wf-conv .who { font-family: var(--wf-font-mono); font-size: 0.72rem; color: var(--wf-text-faint); }
pre.wf-config { background: #05080d; border: 1px solid var(--wf-line-soft); border-radius: var(--wf-radius-sm); padding: 14px; overflow-x: auto; font-size: 0.8rem; color: var(--wf-text-dim); margin: 0; }

/* ---- Onboarding ---- */
.wf-onb { max-width: 720px; margin: 0 auto; }
.wf-onb-steps { display: flex; gap: 8px; margin: 18px 0 26px; }
.wf-onb-step { flex: 1; height: 6px; border-radius: 3px; background: var(--wf-line-soft); }
.wf-onb-step.done { background: var(--wf-accent); }
.wf-hire-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.wf-hire-card { text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform 0.15s var(--wf-ease), border-color 0.15s var(--wf-ease); }
.wf-hire-card:hover { transform: translateY(-3px); border-color: var(--wf-accent); }
.wf-hire-card.sel { border-color: var(--wf-accent); box-shadow: 0 0 0 1px var(--wf-accent); }
.wf-hire-card h3 { font-family: var(--wf-font-display); margin: 10px 0 4px; font-size: 1.05rem; }
.wf-hire-card p { font-size: 0.85rem; color: var(--wf-text-dim); margin: 0 0 8px; }
.wf-hours-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 14px; }
@media (max-width: 700px) { .wf-hours-grid { grid-template-columns: repeat(2, 1fr); } }
.wf-day { background: var(--wf-bg-softer); border: 1px solid var(--wf-line-soft); border-radius: var(--wf-radius-sm); padding: 10px; font-size: 0.8rem; }
.wf-day b { display: block; font-size: 0.75rem; margin-bottom: 6px; color: var(--wf-text-dim); }
.wf-day input { width: 100%; background: var(--wf-bg); border: 1px solid var(--wf-line); border-radius: 6px; color: var(--wf-text); padding: 6px; font-size: 0.78rem; margin-bottom: 4px; }
.wf-day label { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--wf-text-faint); }
.wf-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--wf-bg-softer); border: 1px solid var(--wf-accent); color: var(--wf-text);
  padding: 12px 22px; border-radius: 999px; font-size: 0.9rem; opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--wf-ease), transform 0.25s var(--wf-ease); z-index: 100;
}
.wf-toast.show { opacity: 1; transform: translateX(-50%); }
.wf-loading { padding: 60px 0; text-align: center; color: var(--wf-text-faint); }
.wf-spinner { width: 34px; height: 34px; border: 3px solid var(--wf-line); border-top-color: var(--wf-accent); border-radius: 50%; margin: 0 auto 14px; animation: wfspin 0.9s linear infinite; }
@keyframes wfspin { to { transform: rotate(360deg); } }
/* Phase 4: permission editor + brain header button */
.wf-perm .wf-perm-del { margin-left: auto; flex-shrink: 0; }
.wf-perm-add { display: flex; gap: 8px; margin-top: 10px; }
.wf-perm-add input { flex: 1; }
#brain-btn { white-space: nowrap; }

/* ---- Phase 5: Nova drafts + approval queue extensions ---- */
.wf-draft-edit {
  width: 100%; min-height: 170px; resize: vertical;
  background: #05080d; border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius-sm); padding: 12px;
  font: inherit; font-size: 0.88rem; line-height: 1.55; color: var(--wf-text);
  margin: 4px 0 4px; white-space: pre-wrap;
}
.wf-draft-edit:focus { border-color: var(--wf-accent); outline: none; }
.wf-draft-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  background: #b28bff22; border: 1px solid #b28bff88; color: #cbb7ff;
  border-radius: 999px; padding: 2px 10px; margin-left: 8px; vertical-align: middle;
}
.wf-ready { border-color: var(--wf-accent); margin-bottom: 20px; }
.wf-draft-final {
  background: #05080d; border: 1px solid var(--wf-line-soft);
  border-radius: var(--wf-radius-sm); padding: 14px;
  font-size: 0.88rem; line-height: 1.6; color: var(--wf-text);
  white-space: pre-wrap; margin: 10px 0 14px; max-height: 320px; overflow-y: auto;
}
.wf-approval .actions { margin-top: 10px; }

/* ---- Phase 6: Analytics view ---- */
.wf-filter-row { display: flex; gap: 10px; margin: 4px 0 20px; }
.wf-pill-btn {
  background: var(--wf-bg-soft); color: var(--wf-text-dim);
  border: 1px solid var(--wf-line); border-radius: 999px;
  padding: 8px 18px; font: inherit; font-size: 0.86rem; cursor: pointer;
}
.wf-pill-btn.active { background: var(--wf-accent-dim); color: var(--wf-accent); border-color: var(--wf-accent-deep); }
.wf-metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.wf-metric .v { font-size: 1.15rem; font-weight: 700; color: var(--wf-text); }
.wf-metric .l { font-size: 0.7rem; color: var(--wf-text-faint); }
.wf-analytics-card { cursor: default; }
.wf-analytics-meta { margin-top: 12px; font-size: 0.8rem; color: var(--wf-text-dim); }
.wf-est-panel { border: 1px solid var(--wf-gold); border-radius: var(--wf-radius); padding: 14px 16px; background: rgba(245,185,61,0.06); margin-bottom: 10px; }
.wf-est-label { font-size: 0.8rem; font-weight: 700; color: var(--wf-gold); margin-bottom: 6px; }
.wf-est-range { font-size: 1.6rem; font-weight: 800; color: var(--wf-text); margin-bottom: 8px; }
#analytics-link { white-space: nowrap; }