/* ==========================================================================
   VANTORA UI KIT v1.0 — shared design system for Vantora Staffing apps
   Derived from the dev-team app design language (Apple-style light UI)
   Brand: Vantora Staffing — indigo #4f46e5 → violet #7c3aed
   Include AFTER app base css. Prefix: --v-* tokens, .v-* components.
   ========================================================================== */

:root {
  /* surfaces */
  --v-bg: #ffffff;
  --v-pane: #fafafc;
  --v-sunken: #f5f5f7;
  --v-border: #ececf1;
  --v-border-strong: #d2d2d7;
  /* ink */
  --v-ink: #1d1d1f;
  --v-body: #4b5568;
  --v-muted: #86868b;
  --v-muted-2: #aeaeb2;
  /* functional */
  --v-accent: #007AFF;
  --v-accent-hover: #0066d6;
  --v-accent-soft: #e8f1fd;
  --v-danger: #ff3b30;
  --v-danger-soft: #ffeceb;
  --v-success: #34c759;
  --v-success-soft: #e9f9ee;
  --v-warn: #ff9500;
  --v-warn-soft: #fff4e5;
  --v-violet: #7c3aed;
  --v-violet-soft: #f5f3ff;
  /* brand */
  --v-brand-1: #4f46e5;
  --v-brand-2: #7c3aed;
  --v-brand-grad: linear-gradient(135deg, #4f46e5, #7c3aed);
  /* shape */
  --v-radius-s: 8px;
  --v-radius: 12px;
  --v-radius-l: 18px;
  --v-shadow-s: 0 1px 3px rgba(0,0,0,.06);
  --v-shadow-m: 0 4px 16px rgba(0,0,0,.08);
  --v-shadow-l: 0 12px 40px rgba(0,0,0,.14);
  --v-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base ---------- */
.v-body, body.vantora {
  font-family: var(--v-font);
  color: var(--v-ink);
  background: var(--v-bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- brand ---------- */
.v-logo-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--v-brand-grad);
  color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -.02em;
  box-shadow: 0 4px 12px rgba(79,70,229,.35);
  user-select: none; flex-shrink: 0;
}
.v-logo-tile.lg { width: 44px; height: 44px; border-radius: 13px; font-size: 22px; }
.v-wordmark {
  font-family: var(--v-font);
  font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--v-ink);
  display: inline-flex; align-items: baseline; gap: 6px;
}
.v-wordmark .v-app-suffix { color: var(--v-muted); font-weight: 500; }
.v-brand-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--v-brand-grad); display: inline-block;
}

/* ---------- layout shell ---------- */
.v-app-layout { display: flex; height: 100vh; overflow: hidden; font-family: var(--v-font); }
.v-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.v-page { flex: 1; overflow-y: auto; padding: 24px; background: var(--v-bg); }
.v-page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.v-page-head h1, .v-page-head h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.v-page-sub { color: var(--v-muted); font-size: 13px; margin-top: 2px; }

/* nav rail (matches dev-team) */
.v-nav-rail {
  width: 68px; min-width: 68px; background: var(--v-pane);
  border-right: 1px solid var(--v-border);
  display: flex; flex-direction: column; align-items: center; padding: 12px 0;
}
.v-nav-rail-tabs { flex: 1; display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0 6px; }
.v-nav-rail-bottom { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0 6px; }
.v-nav-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; border: none; background: transparent; color: var(--v-muted);
  cursor: pointer; border-radius: 10px; transition: all .15s;
  font-size: 10px; font-weight: 500; width: 100%; position: relative;
  text-decoration: none; font-family: var(--v-font);
}
.v-nav-tab:hover { background: var(--v-border); color: var(--v-ink); }
.v-nav-tab.active { background: #e4e4e9; color: var(--v-ink); }
.v-nav-tab svg { stroke-width: 1.8; }
.v-nav-badge {
  position: absolute; top: 4px; right: 6px; background: var(--v-danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* app switcher */
.v-switcher-wrap { position: relative; margin-bottom: 8px; cursor: pointer; }
.v-switcher-dropdown {
  display: none; position: absolute; left: 76px; top: 0; z-index: 1000;
  background: #fff; border: 1px solid var(--v-border); border-radius: var(--v-radius);
  box-shadow: var(--v-shadow-l); padding: 8px; min-width: 200px;
}
.v-switcher-wrap.open .v-switcher-dropdown { display: block; }
.v-switcher-title { font-size: 11px; font-weight: 600; color: var(--v-muted); text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px; }
.v-switcher-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: var(--v-radius-s); color: var(--v-ink); text-decoration: none; font-size: 13px; font-weight: 500;
}
.v-switcher-item:hover { background: var(--v-sunken); }
.v-switcher-item.active { background: var(--v-accent-soft); }
.v-switcher-item .v-switcher-ico { width: 20px; text-align: center; }

/* ---------- cards ---------- */
.v-card {
  background: #fff; border: 1px solid var(--v-border);
  border-radius: var(--v-radius); box-shadow: var(--v-shadow-s);
}
.v-card-pad { padding: 16px 20px; }
.v-card-title { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.v-stat {
  background: #fff; border: 1px solid var(--v-border); border-radius: var(--v-radius);
  padding: 16px 18px; box-shadow: var(--v-shadow-s);
}
.v-stat .v-stat-label { font-size: 12px; color: var(--v-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.v-stat .v-stat-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.v-stat .v-stat-sub { font-size: 12px; color: var(--v-muted); margin-top: 2px; }

/* ---------- buttons ---------- */
.v-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--v-font); font-weight: 600; font-size: 13px;
  border-radius: 10px; padding: 9px 16px; cursor: pointer;
  border: 1px solid transparent; transition: all .15s; text-decoration: none;
  white-space: nowrap;
}
.v-btn-primary { background: var(--v-accent); color: #fff; }
.v-btn-primary:hover { background: var(--v-accent-hover); }
.v-btn-primary:disabled { background: var(--v-muted-2); cursor: not-allowed; }
.v-btn-brand { background: var(--v-brand-grad); color: #fff; box-shadow: 0 4px 14px rgba(79,70,229,.30); }
.v-btn-brand:hover { filter: brightness(1.06); }
.v-btn-ghost { background: #fff; border-color: var(--v-border-strong); color: var(--v-ink); }
.v-btn-ghost:hover { background: var(--v-sunken); }
.v-btn-danger { background: var(--v-danger); color: #fff; }
.v-btn-danger:hover { filter: brightness(.94); }
.v-btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }

/* ---------- forms ---------- */
.v-label { display: block; font-size: 12px; font-weight: 600; color: var(--v-body); margin-bottom: 6px; }
.v-input, .v-select, .v-textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--v-border-strong);
  border-radius: 10px; font-size: 14px; background: var(--v-sunken);
  outline: none; transition: border-color .15s, background .15s;
  font-family: var(--v-font); color: var(--v-ink);
}
.v-input:focus, .v-select:focus, .v-textarea:focus { border-color: var(--v-accent); background: #fff; }
.v-field { margin-bottom: 14px; }
.v-help { font-size: 12px; color: var(--v-muted); margin-top: 4px; }
.v-error-text { font-size: 12px; color: var(--v-danger); margin-top: 4px; }

/* segmented control (tab pills) */
.v-seg { display: inline-flex; background: var(--v-sunken); border: 1px solid var(--v-border); border-radius: 10px; padding: 3px; gap: 2px; }
.v-seg button {
  border: none; background: transparent; padding: 7px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--v-muted); cursor: pointer; font-family: var(--v-font);
  transition: all .12s; white-space: nowrap;
}
.v-seg button:hover { color: var(--v-ink); }
.v-seg button.active { background: #fff; color: var(--v-ink); box-shadow: var(--v-shadow-s); }

/* filter chips */
.v-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--v-border-strong);
  background: transparent; font-size: 12px; font-weight: 500; color: var(--v-body);
  cursor: pointer; transition: all .12s; font-family: var(--v-font);
}
.v-chip:hover { border-color: var(--v-accent); color: var(--v-accent); }
.v-chip.active { background: var(--v-accent); border-color: var(--v-accent); color: #fff; }

/* ---------- badges ---------- */
.v-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5;
}
.v-badge.blue { background: var(--v-accent-soft); color: var(--v-accent); }
.v-badge.green { background: var(--v-success-soft); color: #1d7a38; }
.v-badge.red { background: var(--v-danger-soft); color: var(--v-danger); }
.v-badge.orange { background: var(--v-warn-soft); color: #b26a00; }
.v-badge.violet { background: var(--v-violet-soft); color: var(--v-violet); }
.v-badge.gray { background: var(--v-sunken); color: var(--v-muted); }

/* ---------- table ---------- */
.v-table-wrap { background: #fff; border: 1px solid var(--v-border); border-radius: var(--v-radius); overflow: hidden; box-shadow: var(--v-shadow-s); }
.v-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.v-table th {
  text-align: left; padding: 11px 16px; font-size: 11px; font-weight: 600;
  color: var(--v-muted); text-transform: uppercase; letter-spacing: .05em;
  background: var(--v-pane); border-bottom: 1px solid var(--v-border);
}
.v-table td { padding: 12px 16px; border-bottom: 1px solid var(--v-border); color: var(--v-ink); }
.v-table tr:last-child td { border-bottom: none; }
.v-table tbody tr:hover { background: var(--v-pane); }
.v-table tr.clickable { cursor: pointer; }

/* ---------- list rows (kanban cards, queue rows) ---------- */
.v-row-card {
  background: #fff; border: 1px solid var(--v-border); border-radius: var(--v-radius);
  padding: 12px 14px; box-shadow: var(--v-shadow-s); transition: box-shadow .15s, transform .15s;
}
.v-row-card:hover { box-shadow: var(--v-shadow-m); }
.v-row-card.clickable { cursor: pointer; }
.v-row-card.clickable:hover { transform: translateY(-1px); }

/* ---------- modal ---------- */
.v-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,15,20,.42);
  display: flex; align-items: center; justify-content: center; z-index: 2000;
  backdrop-filter: blur(2px);
}
.v-modal {
  background: #fff; border-radius: var(--v-radius-l); box-shadow: var(--v-shadow-l);
  width: min(560px, 94vw); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.v-modal-head { padding: 18px 22px; border-bottom: 1px solid var(--v-border); display: flex; align-items: center; justify-content: space-between; }
.v-modal-head h3 { font-size: 16px; font-weight: 600; margin: 0; }
.v-modal-body { padding: 20px 22px; overflow-y: auto; }
.v-modal-foot { padding: 14px 22px; border-top: 1px solid var(--v-border); display: flex; justify-content: flex-end; gap: 8px; }
.v-modal-x { border: none; background: var(--v-sunken); color: var(--v-muted); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1; }
.v-modal-x:hover { background: var(--v-border); color: var(--v-ink); }

/* ---------- empty state ---------- */
.v-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; color: var(--v-muted); text-align: center; }
.v-empty-ico { font-size: 30px; margin-bottom: 10px; opacity: .6; }

/* ---------- toast ---------- */
.v-toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; }
.v-toast {
  background: var(--v-ink); color: #fff; border-radius: 10px; padding: 11px 16px;
  font-size: 13px; font-weight: 500; box-shadow: var(--v-shadow-l);
  animation: v-toast-in .18s ease;
}
.v-toast.success { background: #1d7a38; }
.v-toast.error { background: var(--v-danger); }
@keyframes v-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- spinner ---------- */
.v-spinner {
  width: 18px; height: 18px; border: 2.5px solid var(--v-border-strong);
  border-top-color: var(--v-accent); border-radius: 50%;
  animation: v-spin .7s linear infinite; display: inline-block;
}
@keyframes v-spin { to { transform: rotate(360deg); } }

/* ---------- login (matches dev-team login-card) ---------- */
.v-login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--v-sunken); font-family: var(--v-font); }
.v-login-card { background: #fff; border-radius: var(--v-radius-l); padding: 44px 40px; width: 380px; box-shadow: var(--v-shadow-m); text-align: center; }
.v-login-card h1 { font-size: 21px; font-weight: 600; margin: 18px 0 4px; color: var(--v-ink); }
.v-login-sub { font-size: 13px; color: var(--v-muted); margin-bottom: 26px; }

/* ---------- progress steps (intake wizard) ---------- */
.v-steps { display: flex; align-items: center; gap: 0; margin-bottom: 28px; flex-wrap: wrap; }
.v-step { display: flex; align-items: center; gap: 8px; }
.v-step-dot {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--v-sunken); border: 1.5px solid var(--v-border-strong); color: var(--v-muted);
  font-size: 12px; font-weight: 700; transition: all .15s; flex-shrink: 0;
}
.v-step-label { font-size: 12px; font-weight: 600; color: var(--v-muted); }
.v-step.active .v-step-dot { background: var(--v-brand-grad); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(79,70,229,.35); }
.v-step.active .v-step-label { color: var(--v-ink); }
.v-step.done .v-step-dot { background: var(--v-success); border-color: transparent; color: #fff; }
.v-step-line { width: 34px; height: 1.5px; background: var(--v-border-strong); margin: 0 10px; }
.v-step.done + .v-step-line { background: var(--v-success); }

/* ---------- misc ---------- */
.v-muted { color: var(--v-muted); }
.v-mono { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; }
.v-divider { height: 1px; background: var(--v-border); border: none; margin: 16px 0; }
.v-grid { display: grid; gap: 14px; }
.v-flex { display: flex; align-items: center; gap: 10px; }
.v-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v-copy-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  background: var(--v-sunken); border: 1px solid var(--v-border); border-radius: 8px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11px; color: var(--v-body); cursor: copy;
}
.v-copy-chip:hover { border-color: var(--v-accent); color: var(--v-accent); }

/* scrollbars */
.v-scroll::-webkit-scrollbar, .v-page::-webkit-scrollbar { width: 8px; height: 8px; }
.v-scroll::-webkit-scrollbar-thumb, .v-page::-webkit-scrollbar-thumb { background: var(--v-border-strong); border-radius: 4px; }
.v-scroll::-webkit-scrollbar-thumb:hover, .v-page::-webkit-scrollbar-thumb:hover { background: var(--v-muted-2); }