/* Whole Business Engine: connected Workforce operations */
.premium-app .workforce-preview-safety {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  color: #d9e5ed;
  background: rgba(255, 122, 0, .065);
  border: 1px solid rgba(255, 122, 0, .36);
  border-radius: 12px;
}
.premium-app .workforce-preview-safety > svg { flex: 0 0 20px; width: 20px; height: 20px; color: #ff7a00; }
.premium-app .workforce-preview-safety span { display: grid; gap: 3px; }
.premium-app .workforce-preview-safety strong { color: #fff; font-size: 13px; }
.premium-app .workforce-preview-safety small { color: #aebdca; font-size: 11px; line-height: 1.45; }

.premium-app .wfops-page {
  --wf-bg: #121212;
  --wf-panel: #0b1927;
  --wf-panel-2: #0e2030;
  --wf-line: #294055;
  --wf-muted: #9fb0c2;
  --wf-text: #f7f8fa;
  --wf-orange: #e56a10;
  --wf-cyan: #19d3ff;
  --wf-green: #20dc82;
  --wf-violet: #ad74ff;
  --wf-pink: #ff5ab7;
  --wf-yellow: #ffc247;
  color: var(--wf-text);
  min-width: 0;
}

.premium-app main:has(.wfops-page),
.premium-app .content:has(.wfops-page),
.premium-app .wfops-page {
  background: var(--wf-bg) !important;
}

.premium-app .wfops-page *,
.premium-app .wfops-page *::before,
.premium-app .wfops-page *::after { box-sizing: border-box; }

.premium-app .wfops-page button,
.premium-app .wfops-page input,
.premium-app .wfops-page select,
.premium-app .wfops-page textarea { font: inherit; }

/* Keep Workforce type on the same crisp rasterization path as the approved
   dark workspaces. Global header glass and mixed font smoothing can otherwise
   composite a few labels onto softened layers. */
.premium-app .wfops-page,
.premium-app .wfops-page :where(
  h2, h3, h4, h5, p, small, strong, em, b, span,
  dt, dd, th, td, label, a, button, input, select, textarea
) {
  font-family: var(--ifg-font-sans, "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif) !important;
  font-synthesis: none;
  text-rendering: auto !important;
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
  text-shadow: none !important;
}

.premium-app .wfops-page header {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.premium-app .wfops-hero,
.premium-app .wfops-panel,
.premium-app .wfops-member-detail {
  background: var(--wf-panel);
  border: 1px solid var(--wf-line);
  border-radius: 14px;
}

.premium-app .wfops-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}

.premium-app .wfops-kicker,
.premium-app .wfops-panel-head small,
.premium-app .wfops-member-detail-head small {
  color: var(--wf-orange);
  display: block;
  font-size: 12px;
  font-weight: 800 !important;
  letter-spacing: .08em;
  line-height: 16px !important;
  text-transform: uppercase;
}

.premium-app .wfops-hero h2 {
  color: var(--wf-text);
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 34px !important;
  margin: 5px 0 7px;
}

.premium-app .wfops-hero p,
.premium-app .wfops-panel-head p,
.premium-app .wfops-muted,
.premium-app .wfops-footnote {
  color: var(--wf-muted);
  font-size: 15px;
  line-height: 22px !important;
  margin: 0;
}

.premium-app .wfops-hero-actions,
.premium-app .wfops-row-actions,
.premium-app .wfops-member-detail-actions,
.premium-app .wfops-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.premium-app .wfops-btn,
.premium-app .wfops-link-btn,
.premium-app .wfops-icon-btn {
  align-items: center;
  background: #142231;
  border: 1px solid #3a5269;
  border-radius: 10px;
  color: var(--wf-text);
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  min-height: 44px;
  padding: 10px 15px;
  text-decoration: none;
}

.premium-app .wfops-btn:hover,
.premium-app .wfops-btn:focus-visible,
.premium-app .wfops-link-btn:hover,
.premium-app .wfops-link-btn:focus-visible,
.premium-app .wfops-icon-btn:hover,
.premium-app .wfops-icon-btn:focus-visible {
  border-color: var(--wf-orange);
  outline: 2px solid transparent;
}

.premium-app .wfops-page :is(button, a[href], input, select, textarea):focus-visible {
  outline: 2px solid var(--wf-orange) !important;
  outline-offset: 2px;
}

.premium-app .wfops-search:focus-within {
  border-color: var(--wf-orange);
  outline: 2px solid var(--wf-orange);
  outline-offset: 2px;
}

.premium-app .wfops-search input:focus-visible { outline: 0 !important; }

.premium-app .wfops-primary {
  background: var(--wf-orange);
  border-color: var(--wf-orange);
  color: #101010;
}

.premium-app .wfops-small { min-height: 38px; padding: 8px 12px; }
.premium-app .wfops-full { width: 100%; }
.premium-app .wfops-danger-outline { border-color: #d95463; color: #ff8892; }
.premium-app .wfops-icon-btn { min-width: 42px; padding: 9px; }

.premium-app .wfops-btn svg,
.premium-app .wfops-link-btn svg,
.premium-app .wfops-icon-btn svg,
.premium-app .wfops-icon svg {
  height: 20px;
  stroke-width: 2;
  width: 20px;
}

.premium-app .wfops-metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 12px;
}

.premium-app .wfops-metric {
  align-items: center;
  background: var(--wf-panel);
  border: 1px solid var(--wf-line);
  border-radius: 12px;
  color: var(--wf-text);
  cursor: pointer;
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  text-align: left;
}

.premium-app .wfops-metric:hover,
.premium-app .wfops-metric:focus-visible { border-color: var(--wf-orange); }

.premium-app .wfops-icon {
  --wf-icon-accent: var(--wf-cyan);
  align-items: center;
  background: color-mix(in srgb, var(--wf-icon-accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--wf-icon-accent) 55%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 12px color-mix(in srgb, var(--wf-icon-accent) 8%, transparent);
  color: var(--wf-icon-accent);
  display: inline-flex;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.premium-app .wfops-icon.wfops-tone-cyan { --wf-icon-accent: var(--wf-cyan); }
.premium-app .wfops-icon.wfops-tone-green { --wf-icon-accent: var(--wf-green); }
.premium-app .wfops-icon.wfops-tone-violet { --wf-icon-accent: var(--wf-violet); }
.premium-app .wfops-icon.wfops-tone-pink { --wf-icon-accent: var(--wf-pink); }
.premium-app .wfops-icon.wfops-tone-orange { --wf-icon-accent: #ff941f; }

.premium-app .wfops-metric > span:last-child { display: grid; min-width: 0; }
.premium-app .wfops-metric small { color: #c4cfda; font-size: 12px; font-weight: 700 !important; line-height: 16px !important; }
.premium-app .wfops-metric strong { font-size: 23px; font-weight: 700 !important; line-height: 28px !important; }
.premium-app .wfops-metric em { color: #aebdcb; font-size: 12px; font-style: normal; line-height: 16px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.premium-app .wfops-nav {
  background: #08131e;
  border: 1px solid var(--wf-line);
  border-radius: 12px;
  display: flex;
  gap: 6px;
  margin: 12px 0;
  overflow-x: auto;
  padding: 7px;
  scrollbar-width: none;
}

.premium-app .wfops-nav::-webkit-scrollbar { display: none; }
.premium-app .wfops-nav button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #b7c4d3;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700 !important;
  gap: 8px;
  line-height: 20px !important;
  min-height: 42px;
  padding: 9px 13px;
}

.premium-app .wfops-nav button.active {
  background: #1b1a17;
  border-color: var(--wf-orange);
  color: #fff;
}

.premium-app .wfops-nav button { --wf-nav-icon: var(--wf-cyan); }
.premium-app .wfops-nav button[data-workforce-tab="team"] { --wf-nav-icon: var(--wf-pink); }
.premium-app .wfops-nav button[data-workforce-tab="crews"] { --wf-nav-icon: var(--wf-green); }
.premium-app .wfops-nav button[data-workforce-tab="schedule"] { --wf-nav-icon: var(--wf-violet); }
.premium-app .wfops-nav button[data-workforce-tab="time"] { --wf-nav-icon: var(--wf-yellow); }
.premium-app .wfops-nav button[data-workforce-tab="approvals"] { --wf-nav-icon: #ff941f; }
.premium-app .wfops-nav button[data-workforce-tab="costing"] { --wf-nav-icon: var(--wf-pink); }
.premium-app .wfops-nav button[data-workforce-tab="payroll"] { --wf-nav-icon: var(--wf-green); }
.premium-app .wfops-nav button[data-workforce-tab="settings"] { --wf-nav-icon: var(--wf-violet); }
.premium-app .wfops-nav button svg { color: var(--wf-nav-icon); height: 19px; width: 19px; }
.premium-app .wfops-nav button b {
  background: var(--wf-orange);
  border-radius: 999px;
  color: #101010;
  font-size: 11px;
  min-width: 20px;
  padding: 3px 6px;
  text-align: center;
}

.premium-app .wfops-body { min-width: 0; }
.premium-app .wfops-today-grid,
.premium-app .wfops-detail-grid,
.premium-app .wfops-time-layout,
.premium-app .wfops-approval-layout,
.premium-app .wfops-payroll-layout,
.premium-app .wfops-cost-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.premium-app .wfops-wide { grid-column: 1 / -1; }
.premium-app .wfops-panel { min-width: 0; overflow: hidden; padding: 18px; }
.premium-app .wfops-panel-head {
  align-items: center;
  border-bottom: 1px solid var(--wf-line);
  display: grid;
  gap: 13px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: -2px -2px 15px;
  padding: 0 2px 15px;
}

.premium-app .wfops-panel-head h3 {
  color: var(--wf-text);
  font-size: 20px;
  font-weight: 700 !important;
  line-height: 24px !important;
  margin: 2px 0 3px;
}

.premium-app .wfops-action-row,
.premium-app .wfops-job-strip > button,
.premium-app .wfops-crew-summary > button {
  align-items: center;
  background: #091521;
  border: 1px solid var(--wf-line);
  border-radius: 10px;
  color: var(--wf-text);
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  margin-top: 9px;
  padding: 13px;
  text-align: left;
  width: 100%;
}

.premium-app .wfops-action-row strong,
.premium-app .wfops-job-strip strong,
.premium-app .wfops-crew-summary strong { display: block; font-size: 15px; font-weight: 700 !important; line-height: 20px !important; }
.premium-app .wfops-action-row small,
.premium-app .wfops-job-strip small,
.premium-app .wfops-crew-summary small { color: #aebdcb; display: block; font-size: 13px; line-height: 18px !important; margin-top: 3px; }
.premium-app .wfops-action-row b { color: var(--wf-orange); font-size: 13px; font-weight: 700 !important; line-height: 18px !important; }
.premium-app .is-good { color: var(--wf-green) !important; }
.premium-app .is-warning { color: #ffb44a !important; }
.premium-app .is-danger { color: #ff6b77 !important; }
.premium-app .is-neutral { color: var(--wf-muted) !important; }

.premium-app .wfops-live-list article,
.premium-app .wfops-mini-list article,
.premium-app .wfops-mini-list > button,
.premium-app .wfops-batch-list article,
.premium-app .wfops-record-list article {
  align-items: center;
  background: #091521;
  border: 1px solid var(--wf-line);
  border-radius: 10px;
  color: var(--wf-text);
  display: flex;
  gap: 11px;
  margin-top: 9px;
  min-width: 0;
  padding: 12px;
  text-align: left;
  width: 100%;
}

.premium-app .wfops-live-list article > div,
.premium-app .wfops-mini-list article > div,
.premium-app .wfops-mini-list > button > span:nth-child(2),
.premium-app .wfops-batch-list article > div { flex: 1; min-width: 0; }
.premium-app .wfops-live-list strong,
.premium-app .wfops-mini-list strong,
.premium-app .wfops-batch-list strong { display: block; font-size: 14px; }
.premium-app .wfops-live-list small,
.premium-app .wfops-mini-list small,
.premium-app .wfops-batch-list small { color: var(--wf-muted); display: block; font-size: 12px; margin-top: 3px; }
.premium-app .wfops-live-dot { color: var(--wf-green); font-size: 11px; font-weight: 900; }

.premium-app .wfops-avatar {
  align-items: center;
  border: 1px solid var(--wf-cyan);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.premium-app .wfops-avatar-large { height: 64px; width: 64px; }
.premium-app .wfops-avatar-stack { display: flex; }
.premium-app .wfops-avatar-stack .wfops-avatar { margin-left: -9px; }
.premium-app .wfops-avatar-stack .wfops-avatar:first-child { margin-left: 0; }

.premium-app .wfops-empty {
  align-items: center;
  border: 1px dashed #3a5269;
  border-radius: 10px;
  color: var(--wf-muted);
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  min-height: 150px;
  padding: 22px;
  text-align: center;
}
.premium-app .wfops-empty strong { color: var(--wf-text); font-size: 16px; }
.premium-app .wfops-empty p { font-size: 13px; margin: 0; max-width: 420px; }

.premium-app .wfops-privacy-note {
  align-items: center;
  color: var(--wf-muted);
  display: flex;
  font-size: 13px;
  gap: 10px;
  grid-column: 1 / -1;
  margin: 2px 4px;
}
.premium-app .wfops-privacy-note svg { color: var(--wf-green); height: 21px; width: 21px; }
.premium-app .wfops-privacy-note strong { color: var(--wf-text); margin-right: 6px; }

.premium-app .wfops-schedule-guide {
  align-items: center;
  background: #091521;
  border: 1px solid var(--wf-line);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  margin: 0 0 15px;
  overflow-x: auto;
  padding: 11px 13px;
  scrollbar-width: thin;
}

.premium-app .wfops-schedule-guide > span {
  align-items: center;
  color: #dce6ef;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  gap: 7px;
  white-space: nowrap;
}

.premium-app .wfops-schedule-guide > i {
  background: #50657a;
  display: block;
  flex: 1 0 24px;
  height: 1px;
  min-width: 24px;
}

.premium-app .wfops-schedule-guide svg { height: 17px; width: 17px; }

.premium-app .wfops-clock-context {
  background: #091521;
  border: 1px solid var(--wf-line);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 10px;
  padding: 12px;
}

.premium-app .wfops-clock-context label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.premium-app .wfops-clock-context label > span {
  color: #aebdcb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 15px;
  text-transform: uppercase;
}

.premium-app .wfops-clock-context select {
  min-height: 44px;
  min-width: 0;
}

.premium-app .wfops-clock-state {
  align-items: center;
  color: #b9c8d5;
  display: flex;
  font-size: 12px;
  gap: 8px;
  line-height: 18px;
  margin: 0 2px 10px;
  min-height: 18px;
}

.premium-app .wfops-clock-state::before {
  background: #687d90;
  border-radius: 50%;
  content: "";
  flex: 0 0 7px;
  height: 7px;
  width: 7px;
}

.premium-app .wfops-clock-state.is-active::before,
.premium-app .wfops-clock-state[data-state="active"]::before {
  background: var(--wf-green);
}

.premium-app .wfops-clock-state.is-warning::before,
.premium-app .wfops-clock-state[data-state="warning"]::before {
  background: var(--wf-yellow);
}

.premium-app .wfops-clock-flow {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 15px;
}

.premium-app .wfops-clock-flow > button {
  align-items: center;
  appearance: none;
  background: #091521;
  border: 1px solid var(--wf-line);
  border-radius: 9px;
  color: #dce6ef;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  line-height: 16px;
  min-height: 48px;
  min-width: 0;
  padding: 9px 8px;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  width: 100%;
}

.premium-app .wfops-clock-flow > button:hover {
  background: #102131;
  border-color: #5d748a;
  color: #fff;
}

.premium-app .wfops-clock-flow > button:focus-visible {
  border-color: var(--wf-orange);
  outline: 2px solid var(--wf-orange);
  outline-offset: 2px;
}

.premium-app .wfops-clock-flow > button.is-active,
.premium-app .wfops-clock-flow > button[aria-pressed="true"] {
  background: #2a2118;
  border-color: var(--wf-orange);
  color: #fff;
}

.premium-app .wfops-clock-flow > button:active:not(:disabled) {
  background: #352617;
  border-color: #ff9c48;
}

.premium-app .wfops-clock-flow > button:disabled,
.premium-app .wfops-clock-flow > button[aria-disabled="true"] {
  background: #0a1520;
  border-color: #26394b;
  color: #6f8294;
  cursor: not-allowed;
  opacity: .72;
}

.premium-app .wfops-active-clocks {
  display: grid;
  gap: 9px;
}

.premium-app .wfops-active-clocks > article {
  align-items: center;
  background: #091521;
  border: 1px solid var(--wf-line);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: 13px;
}

.premium-app .wfops-active-clocks > article > div { min-width: 0; }
.premium-app .wfops-active-clocks small { color: var(--wf-green); display: block; font-size: 11px; font-weight: 900; }
.premium-app .wfops-active-clocks strong { display: block; font-size: 15px; margin-top: 2px; }
.premium-app .wfops-active-clocks p { color: var(--wf-muted); font-size: 13px; margin: 3px 0 0; overflow-wrap: anywhere; }
.premium-app .wfops-active-clocks time { color: #dce6ef; font-size: 13px; font-weight: 800; white-space: nowrap; }

.premium-app .wfops-team-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 2fr) minmax(280px, .8fr);
}
.premium-app .wfops-team-tools {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}
.premium-app .wfops-segments { display: flex; flex-wrap: wrap; gap: 7px; }
.premium-app .wfops-segments button {
  background: #111f2d;
  border: 1px solid #334b62;
  border-radius: 8px;
  color: #c3cfdb;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 11px;
}
.premium-app .wfops-segments button.active { border-color: var(--wf-orange); color: #fff; }
.premium-app .wfops-segments b { margin-left: 7px; }
.premium-app .wfops-search {
  align-items: center;
  background: #07111b;
  border: 1px solid #3b5269;
  border-radius: 9px;
  display: flex;
  flex: 0 1 340px;
  gap: 8px;
  min-height: 42px;
  padding: 0 11px;
}
.premium-app .wfops-search svg { color: var(--wf-cyan); height: 18px; width: 18px; }
.premium-app .wfops-search input { background: transparent; border: 0; color: #fff; min-width: 0; outline: 0; width: 100%; }

.premium-app .wfops-member-grid,
.premium-app .wfops-crews-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.premium-app .wfops-member,
.premium-app .wfops-crew-card,
.premium-app .wfops-cost-card {
  background: #091521;
  border: 1px solid var(--wf-line);
  border-radius: 11px;
  min-width: 0;
  overflow: hidden;
}
.premium-app .wfops-member-open {
  align-items: center;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: grid;
  gap: 11px;
  grid-template-columns: auto minmax(0,1fr) auto;
  padding: 14px;
  text-align: left;
  width: 100%;
}
.premium-app .wfops-member-open strong { display: block; font-size: 15px; }
.premium-app .wfops-member-open small { color: var(--wf-muted); display: block; font-size: 12px; margin-top: 3px; }
.premium-app .wfops-member-open em { display: block; font-size: 12px; font-style: normal; margin-top: 7px; }
.premium-app .wfops-member-quick {
  border-top: 1px solid var(--wf-line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.premium-app .wfops-member-quick a,
.premium-app .wfops-member-quick button {
  align-items: center;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--wf-line);
  color: #c8d4df;
  display: flex;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  justify-content: center;
  min-height: 42px;
  text-decoration: none;
}
.premium-app .wfops-member-quick svg { color: var(--wf-cyan); height: 17px; width: 17px; }
.premium-app .wfops-member-quick a[href^="tel:"] svg { color: var(--wf-green); }
.premium-app .wfops-member-quick a[href^="mailto:"] svg { color: var(--wf-pink); }
.premium-app .wfops-member-quick button svg { color: var(--wf-violet); }

.premium-app .wfops-member-detail { padding: 18px; }
.premium-app .wfops-member-detail-head {
  align-items: center;
  border-bottom: 1px solid var(--wf-line);
  display: grid;
  gap: 13px;
  grid-template-columns: auto auto minmax(0,1fr) auto;
  padding-bottom: 17px;
}
.premium-app .wfops-member-detail-head h3 { font-size: 24px; margin: 3px 0; }
.premium-app .wfops-member-detail-head p { color: var(--wf-muted); margin: 0; }
.premium-app .wfops-member-summary,
.premium-app .wfops-approval-summary,
.premium-app .wfops-payroll-summary,
.premium-app .wfops-cost-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0,1fr));
  margin: 14px 0;
}
.premium-app .wfops-member-summary > div,
.premium-app .wfops-approval-summary > div,
.premium-app .wfops-payroll-summary > div,
.premium-app .wfops-cost-summary > div {
  background: #091521;
  border: 1px solid var(--wf-line);
  border-radius: 9px;
  display: grid;
  gap: 4px;
  padding: 12px;
}
.premium-app .wfops-member-summary small,
.premium-app .wfops-approval-summary small,
.premium-app .wfops-payroll-summary small,
.premium-app .wfops-cost-summary small { color: var(--wf-muted); font-size: 12px; }
.premium-app .wfops-member-summary strong,
.premium-app .wfops-approval-summary strong,
.premium-app .wfops-payroll-summary strong,
.premium-app .wfops-cost-summary strong { color: #fff; font-size: 17px; }

.premium-app .wfops-dl { margin: 0; }
.premium-app .wfops-dl > div {
  align-items: center;
  border-bottom: 1px solid var(--wf-line);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(110px,.7fr) minmax(0,1fr);
  padding: 11px 0;
}
.premium-app .wfops-dl dt { color: var(--wf-muted); font-size: 13px; }
.premium-app .wfops-dl dd { color: #fff; font-size: 14px; font-weight: 800; margin: 0; overflow-wrap: anywhere; }
.premium-app .wfops-dl a { color: var(--wf-cyan); }
.premium-app .wfops-private-panel { border-color: #7b5836; }
.premium-app .wfops-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.premium-app .wfops-tags span {
  align-items: center;
  background: #112434;
  border: 1px solid #355269;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  padding: 7px 10px;
}
.premium-app .wfops-tags svg { color: var(--wf-green); height: 15px; width: 15px; }

.premium-app .wfops-table-wrap,
.premium-app .wfops-schedule-table {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
.premium-app .wfops-data-table {
  border-collapse: collapse;
  min-width: 780px;
  width: 100%;
}
.premium-app .wfops-schedule-table table {
  border-collapse: collapse;
  min-width: 780px;
  width: 100%;
}
.premium-app .wfops-data-table th,
.premium-app .wfops-data-table td,
.premium-app .wfops-schedule-table th,
.premium-app .wfops-schedule-table td {
  border-bottom: 1px solid var(--wf-line);
  font-size: 13px;
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}
.premium-app .wfops-data-table th,
.premium-app .wfops-schedule-table th { color: #abc0d2; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.premium-app .wfops-schedule-table td > small {
  color: var(--wf-muted);
  display: block;
  margin-top: 3px;
  white-space: nowrap;
}
.premium-app .wfops-schedule-table td:nth-child(2) { white-space: nowrap; }
.premium-app .wfops-person-cell { align-items: center; display: flex; gap: 9px; min-width: 170px; }
.premium-app .wfops-status {
  border-radius: 999px;
  display: inline-block;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 5px 8px;
}

.premium-app .wfops-crew-card { padding: 15px; }
.premium-app .wfops-crew-card header,
.premium-app .wfops-crew-card footer,
.premium-app .wfops-cost-card header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.premium-app .wfops-crew-card h4,
.premium-app .wfops-cost-card h4 { font-size: 17px; margin: 0; }
.premium-app .wfops-crew-card p,
.premium-app .wfops-cost-card p { color: var(--wf-muted); font-size: 13px; line-height: 1.45; }

.premium-app .wfops-cost-card > button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--wf-text);
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 15px;
  text-align: left;
  width: 100%;
}

.premium-app .wfops-cost-card > button span { display: grid; gap: 3px; min-width: 0; }
.premium-app .wfops-cost-card > button small,
.premium-app .wfops-cost-card > button em { color: var(--wf-muted); font-size: 12px; font-style: normal; overflow-wrap: anywhere; }
.premium-app .wfops-cost-card > button strong { font-size: 15px; }
.premium-app .wfops-cost-card > button b { flex: 0 0 auto; }

.premium-app .wfops-cost-signals {
  border-top: 1px solid var(--wf-line);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px 15px 2px;
}

.premium-app .wfops-cost-pace {
  background: #0d1b28;
  border: 1px solid #334b62;
  border-left: 4px solid #73879a;
  border-radius: 8px;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
}

.premium-app .wfops-cost-pace small {
  color: var(--wf-muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.premium-app .wfops-cost-pace strong { color: #f6f9fc; font-size: 13px; }
.premium-app .wfops-cost-pace span { color: #9fb3c5; font-size: 11px; line-height: 1.35; }
.premium-app .wfops-completion-forecast {
  border-top: 1px solid #294157;
  display: grid;
  gap: 3px;
  margin-top: 6px;
  padding-top: 8px;
}
.premium-app .wfops-completion-forecast > small { font-size: 9px; }
.premium-app .wfops-completion-forecast > strong { font-size: 12px; }
.premium-app .wfops-completion-forecast > span { font-size: 10px; }
.premium-app .wfops-completion-forecast.is-behind > strong { color: #ff9da6; }
.premium-app .wfops-completion-forecast.is-at-risk > strong { color: #ffe17b; }
.premium-app .wfops-cost-pace.is-on-plan,
.premium-app .wfops-cost-pace.is-complete { border-left-color: var(--wf-green); }
.premium-app .wfops-cost-pace.is-upcoming { border-left-color: var(--wf-cyan); }
.premium-app .wfops-cost-pace.is-at-risk { border-left-color: var(--wf-yellow); }
.premium-app .wfops-cost-pace.is-behind { border-left-color: #ff6b77; }
.premium-app .wfops-cost-pace.is-behind strong { color: #ff9da6; }

.premium-app .wfops-progress-row {
  align-items: center;
  border-top: 1px solid var(--wf-line);
  display: grid;
  gap: 8px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px 15px 0;
}

.premium-app .wfops-progress-row > span { display: flex; gap: 8px; justify-content: space-between; }
.premium-app .wfops-progress-row small { color: var(--wf-muted); font-size: 12px; }
.premium-app .wfops-progress-row strong { font-size: 12px; }
.premium-app .wfops-progress-row > div { background: #172a3b; border-radius: 999px; grid-column: 1 / -1; height: 7px; overflow: hidden; }
.premium-app .wfops-progress-row > div > i { background: var(--wf-green); border-radius: inherit; display: block; height: 100%; }
.premium-app .wfops-progress-row > div > i.warning { background: var(--wf-yellow); }
.premium-app .wfops-progress-row > div > i.over { background: #ff6b77; }
.premium-app .wfops-progress-row > em { color: #dce6ef; font-size: 12px; font-style: normal; font-weight: 800; grid-column: 2; grid-row: 1; }

.premium-app .wfops-cost-card > dl { margin: 12px 15px; }
.premium-app .wfops-cost-card > dl > div { border-top: 1px solid var(--wf-line); display: flex; gap: 12px; justify-content: space-between; padding: 9px 0; }
.premium-app .wfops-cost-card > dl dt { color: var(--wf-muted); font-size: 12px; }
.premium-app .wfops-cost-card > dl dd { font-size: 13px; font-weight: 800; margin: 0; text-align: right; }
.premium-app .wfops-cost-card > dl dd small { color: var(--wf-muted); display: block; font-size: 10px; font-weight: 700; margin-top: 3px; }
.premium-app .wfops-cost-card > footer { border-top: 1px solid var(--wf-line); padding: 12px 15px 15px; }

.premium-app .wfops-cost-detail {
  background: #091521;
  border: 1px solid var(--wf-line);
  border-radius: 11px;
  margin-top: 14px;
  overflow: hidden;
  padding: 15px;
}

.premium-app .wfops-cost-detail > header {
  align-items: center;
  border-bottom: 1px solid var(--wf-line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.premium-app .wfops-cost-detail h4 { font-size: 18px; margin: 3px 0 0; }

.premium-app .wfops-settings-form { display: grid; gap: 10px; }
.premium-app .wfops-setting-field,
.premium-app .wfops-setting-toggle,
.premium-app .wfops-settings-access {
  align-items: center;
  background: #091521;
  border: 1px solid var(--wf-line);
  border-radius: 10px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0,1fr) auto;
  padding: 13px;
}
.premium-app .wfops-setting-field strong,
.premium-app .wfops-setting-toggle strong { display: block; font-size: 14px; }
.premium-app .wfops-setting-field small,
.premium-app .wfops-setting-toggle small { color: var(--wf-muted); display: block; font-size: 12px; margin-top: 3px; }
.premium-app .wfops-setting-field > span:last-child { align-items: center; display: flex; gap: 8px; }
.premium-app .wfops-setting-field input { max-width: 110px; }
.premium-app .wfops-setting-toggle { grid-template-columns: auto minmax(0,1fr); }
.premium-app .wfops-setting-toggle input { accent-color: var(--wf-orange); height: 19px; width: 19px; }
.premium-app .wfops-setting-toggle > span { align-items: center; display: grid; gap: 2px 9px; grid-template-columns: auto 1fr; }
.premium-app .wfops-setting-toggle > span svg { color: var(--wf-cyan); grid-row: 1 / 3; height: 22px; width: 22px; }
.premium-app .wfops-settings-access { grid-template-columns: repeat(2,minmax(0,1fr)); }
.premium-app .wfops-settings-access h4 { grid-column: 1 / -1; margin: 0; }
.premium-app .wfops-settings-form footer { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.premium-app .wfops-settings-form footer p { color: var(--wf-muted); font-size: 12px; margin: 0; }

.premium-app .wfops-page input,
.premium-app .wfops-page select,
.premium-app .wfops-page textarea {
  background: #07111b;
  border: 1px solid #405a72;
  border-radius: 8px;
  color: #fff;
  min-height: 43px;
  padding: 10px 11px;
  width: 100%;
}
.premium-app .wfops-page textarea { min-height: 100px; resize: vertical; }
.premium-app .wfops-page label { color: #dbe4ec; font-size: 13px; font-weight: 800; }

.premium-app .wfops-time-field {
  display: grid;
  gap: 6px;
}
.premium-app .wfops-time-field > label {
  color: #dbe4ec;
  font-size: 13px;
  font-weight: 800;
}
.premium-app .wfops-time-control {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 112px;
}
.premium-app .wfops-time-control > input { min-width: 0; }
.premium-app .wfops-meridiem-switch {
  background: #07111b;
  border: 1px solid #405a72;
  border-radius: 8px;
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
}
.premium-app .wfops-meridiem-switch button {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #a9bac9;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  min-height: 44px;
  min-width: 48px;
  padding: 0 8px;
}
.premium-app .wfops-meridiem-switch button.is-active,
.premium-app .wfops-meridiem-switch button[aria-pressed="true"] {
  background: var(--wf-orange);
  border-color: #ffad63;
  color: #07111b;
}
.premium-app .wfops-meridiem-switch button:focus-visible {
  outline: 3px solid rgba(50, 207, 255, .75);
  outline-offset: 2px;
}
.premium-app .wfops-meridiem-switch button:disabled {
  color: #607487;
  cursor: default;
  opacity: .7;
}

.premium-app .wfops-modal-backdrop {
  align-items: center;
  background: rgba(2,7,12,.82);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 10050;
}
.premium-app .wfops-modal {
  background: #0b1927;
  border: 1px solid #49627a;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 88dvh, 860px);
  max-width: 840px;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 20px;
  scrollbar-gutter: stable;
  width: min(100%, 840px);
}
.premium-app .wfops-member-modal {
  height: min(88vh, 88dvh, 860px);
  max-width: 980px;
  width: min(100%, 980px);
}
.premium-app .wfops-modal > header {
  align-items: center;
  border-bottom: 1px solid var(--wf-line);
  display: grid;
  flex: 0 0 auto;
  gap: 12px;
  grid-template-columns: auto minmax(0,1fr) auto;
  margin-bottom: 16px;
  padding-bottom: 15px;
}
.premium-app .wfops-modal h3 { font-size: 23px; margin: 3px 0 0; }
.premium-app .wfops-modal-form {
  display: grid;
  gap: 13px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scroll-padding-bottom: 82px;
}
.premium-app .wfops-form-grid,
.premium-app .wfops-check-grid {
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.premium-app .wfops-modal-form label { display: grid; gap: 6px; }
.premium-app .wfops-modal-footer {
  background: #0b1927;
  border-top: 1px solid var(--wf-line);
  bottom: 0;
  justify-content: flex-end;
  padding: 14px 0 2px;
  position: sticky;
  z-index: 2;
}

.premium-app .wfops-member-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding-right: 0;
}
.premium-app .wfops-member-intro {
  align-items: baseline;
  background: #101f2d;
  border: 1px solid #314a61;
  border-radius: 10px;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 10px 12px;
}
.premium-app .wfops-member-intro strong { color: #fff; font-size: 14px; }
.premium-app .wfops-member-intro span { color: var(--wf-muted); font-size: 13px; line-height: 18px; }
.premium-app .wfops-worker-type-picker {
  display: grid;
  flex: 0 0 auto;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.premium-app .wfops-worker-type-option {
  cursor: pointer;
  display: block;
  position: relative;
}
.premium-app .wfops-worker-type-option > input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}
.premium-app .wfops-worker-type-option > span {
  background: #0a1622;
  border: 1px solid #3a5269;
  border-radius: 10px;
  display: grid;
  gap: 3px;
  min-height: 64px;
  padding: 11px 13px;
}
.premium-app .wfops-worker-type-option strong { color: #fff; font-size: 15px; }
.premium-app .wfops-worker-type-option small { color: var(--wf-muted); font-size: 12px; line-height: 17px; }
.premium-app .wfops-worker-type-option.is-selected > span {
  background: #201b16;
  border-color: var(--wf-orange);
  box-shadow: inset 3px 0 0 var(--wf-orange);
}
.premium-app .wfops-worker-type-option > input:focus-visible + span {
  outline: 3px solid rgba(50, 207, 255, .72);
  outline-offset: 2px;
}
.premium-app .wfops-member-sections {
  display: grid;
  flex: 1 1 auto;
  gap: 9px;
  min-height: 0;
  overflow-y: auto;
  padding: 1px 5px 8px 1px;
  scroll-padding-bottom: 18px;
}
.premium-app .wfops-member-sections > [data-worker-type-panel] {
  display: grid;
  gap: 9px;
}
.premium-app .wfops-member-sections > [data-worker-type-panel][hidden] { display: none; }
.premium-app .wfops-member-section {
  background: #091521;
  border: 1px solid #30485e;
  border-radius: 10px;
  overflow: clip;
}
.premium-app .wfops-member-section > summary {
  cursor: pointer;
  list-style: none;
  min-height: 58px;
  padding: 10px 13px;
}
.premium-app .wfops-member-section > summary::-webkit-details-marker { display: none; }
.premium-app .wfops-member-section > summary > span {
  align-items: center;
  display: grid;
  gap: 2px 10px;
  grid-template-columns: 30px minmax(0, 1fr);
  position: relative;
}
.premium-app .wfops-member-section > summary > span::after {
  color: var(--wf-cyan);
  content: '+';
  font-size: 22px;
  font-weight: 700;
  position: absolute;
  right: 2px;
  top: 7px;
}
.premium-app .wfops-member-section[open] > summary > span::after { content: '−'; }
.premium-app .wfops-member-section > summary b {
  align-items: center;
  border: 1px solid #3f657e;
  border-radius: 50%;
  color: var(--wf-cyan);
  display: inline-flex;
  font-size: 12px;
  grid-row: 1 / span 2;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.premium-app .wfops-member-section > summary strong { color: #fff; font-size: 15px; padding-right: 30px; }
.premium-app .wfops-member-section > summary small { color: var(--wf-muted); font-size: 12px; line-height: 17px; padding-right: 30px; }
.premium-app .wfops-member-section-body {
  border-top: 1px solid var(--wf-line);
  padding: 13px;
}
.premium-app .wfops-member-form label { align-content: start; }
.premium-app .wfops-full-span { grid-column: 1 / -1; }
.premium-app .wfops-field-help {
  color: var(--wf-muted);
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}
.premium-app .wfops-rate-preview input[readonly] {
  background: #102334;
  border-color: #38617d;
  color: var(--wf-cyan);
}
.premium-app .wfops-compliance-note {
  background: #181c20;
  border: 1px solid #765b34;
  border-radius: 9px;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
}
.premium-app .wfops-compliance-note strong { color: #ffb565; font-size: 13px; }
.premium-app .wfops-compliance-note span { color: #c6d0d9; font-size: 12px; line-height: 18px; }
.premium-app .wfops-member-form > .wfops-modal-footer {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 11px 0 max(2px, env(safe-area-inset-bottom));
  position: static;
}

@media (max-width: 1050px) {
  .premium-app .wfops-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .premium-app .wfops-team-layout { grid-template-columns: 1fr; }
  .premium-app .wfops-team-aside { display: grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .premium-app .wfops-clock-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .premium-app .wfops-hero { align-items: flex-start; flex-direction: column; padding: 18px; }
  .premium-app .wfops-hero-actions { width: 100%; }
  .premium-app .wfops-hero-actions .wfops-btn { flex: 1; }
  .premium-app .wfops-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .premium-app .wfops-metric { align-items: flex-start; min-height: 118px; padding: 13px; }
  .premium-app .wfops-metric em { white-space: normal; }
  .premium-app .wfops-nav {
    box-shadow: inset -18px 0 16px -18px rgba(255,255,255,.8);
    margin-inline: -2px;
    padding-bottom: 10px;
    scrollbar-color: var(--wf-orange) #152433;
    scrollbar-width: thin;
  }
  .premium-app .wfops-nav::-webkit-scrollbar { display: block; height: 6px; }
  .premium-app .wfops-nav::-webkit-scrollbar-track { background: #152433; border-radius: 999px; }
  .premium-app .wfops-nav::-webkit-scrollbar-thumb { background: var(--wf-orange); border-radius: 999px; }
  .premium-app .wfops-today-grid,
  .premium-app .wfops-detail-grid,
  .premium-app .wfops-time-layout,
  .premium-app .wfops-approval-layout,
  .premium-app .wfops-payroll-layout,
  .premium-app .wfops-cost-grid,
  .premium-app .wfops-member-grid,
  .premium-app .wfops-crews-grid,
  .premium-app .wfops-team-aside { grid-template-columns: 1fr; }
  .premium-app .wfops-panel { padding: 15px; }
  .premium-app .wfops-panel-head { align-items: start; grid-template-columns: auto minmax(0,1fr); }
  .premium-app .wfops-panel-head > .wfops-btn { grid-column: 1 / -1; width: 100%; }
  .premium-app .wfops-action-row,
  .premium-app .wfops-job-strip > button,
  .premium-app .wfops-crew-summary > button { grid-template-columns: auto minmax(0,1fr) auto; }
  .premium-app .wfops-action-row b,
  .premium-app .wfops-crew-summary em { grid-column: 2 / -1; }
  .premium-app .wfops-team-tools { align-items: stretch; flex-direction: column; }
  .premium-app .wfops-search { flex-basis: auto; }
  .premium-app .wfops-member-detail-head { grid-template-columns: auto auto minmax(0,1fr); }
  .premium-app .wfops-member-detail-head > .wfops-member-detail-actions { grid-column: 1 / -1; }
  .premium-app .wfops-member-summary,
  .premium-app .wfops-approval-summary,
  .premium-app .wfops-payroll-summary,
  .premium-app .wfops-cost-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .premium-app .wfops-settings-access,
  .premium-app .wfops-form-grid,
  .premium-app .wfops-check-grid { grid-template-columns: 1fr; }
  .premium-app .wfops-settings-form footer { align-items: stretch; flex-direction: column; }
  .premium-app .wfops-modal-backdrop { align-items: flex-end; padding: 0; }
  .premium-app .wfops-modal {
    border-radius: 16px 16px 0 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding: 17px 17px max(17px, env(safe-area-inset-bottom));
    width: 100%;
  }
  .premium-app .wfops-member-intro { align-items: flex-start; flex-direction: column; gap: 3px; }
  .premium-app .wfops-worker-type-picker { grid-template-columns: 1fr; }
  .premium-app .wfops-worker-type-option > span { min-height: 58px; }
  .premium-app .wfops-member-sections { padding-right: 2px; }
  .premium-app .wfops-member-form > .wfops-modal-footer { flex-wrap: nowrap; }
  .premium-app .wfops-member-form > .wfops-modal-footer .wfops-btn { flex: 1 1 50%; }
  .premium-app .wfops-modal-footer { padding-bottom: max(2px, env(safe-area-inset-bottom)); }
  .premium-app .wfops-active-clocks > article { align-items: start; grid-template-columns: auto minmax(0, 1fr); }
  .premium-app .wfops-active-clocks > article > time { grid-column: 2; }
  .premium-app .wfops-active-clocks > article > .wfops-btn { grid-column: 1 / -1; width: 100%; }
}