/* Vilkax Business control panel — boss surface styles.
 *
 * Functional, on-brand baseline. Final visual polish (illustration, motion,
 * the premium "command-deck" treatment) lands with the design assets — see
 * docs/business/BUSINESS_ONBOARDING.md § "Deferred visual polish". Everything
 * here is structured so a designer can restyle tokens without touching the JS.
 */

.bizcp { max-width: 1080px; margin: 0 auto; }
.bizcp-state { animation: vlx-fadeIn 0.25s ease-out; }

/* ── Empty / gate cards ──────────────────────────────────────────── */
.bizcp-empty { text-align: center; padding: 40px 28px; }
.bizcp-empty .submit-btn { display: inline-block; margin-top: 18px; }
.bizcp-empty .app-card-note { margin-top: 14px; }

.bizcp-form { display: flex; flex-direction: column; gap: 8px; max-width: 380px; margin: 18px auto 0; text-align: left; }
.bizcp-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(199,207,217,.5); }
.bizcp-input {
  width: 100%; padding: 11px 13px; font-size: 14px; font-family: inherit;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; color: #fff;
}
.bizcp-input:focus { outline: none; border-color: rgba(91,107,255,.6); box-shadow: 0 0 0 3px rgba(91,107,255,.15); }
.bizcp-err { color: #F87171; font-size: 13px; margin: 4px 0 0; }

/* ── Org header ──────────────────────────────────────────────────── */
.bizcp-orghead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 8px 0 24px;
}
.bizcp-h { font-size: 26px; font-weight: 800; color: #fff; margin: 0; }
.bizcp-sub { font-size: 13px; color: rgba(199,207,217,.5); margin: 4px 0 0; font-family: ui-monospace, monospace; }
.bizcp-tierbox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bizcp-tierlabel { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(199,207,217,.45); }
.bizcp-tier-select { width: auto; min-width: 150px; padding: 8px 12px; }

/* ── Stat tiles ──────────────────────────────────────────────────── */
.bizcp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.bizcp-stat {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 18px 14px; text-align: center;
}
.bizcp-stat-v { font-size: 24px; font-weight: 800; color: #7C8EFF; }
.bizcp-stat-l { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(199,207,217,.5); margin-top: 6px; }

/* ── Tools grid ──────────────────────────────────────────────────── */
.bizcp-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bizcp-tool {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
}
.bizcp-tool.is-locked { opacity: .5; }
.bizcp-tool-ic {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px;
  background: rgba(91,107,255,.12); border: 1px solid rgba(91,107,255,.3); color: #7C8EFF;
}
.bizcp-tool-body { flex: 1; }
.bizcp-tool-name { font-size: 14px; font-weight: 700; color: #fff; }
.bizcp-tool-desc { font-size: 12px; color: rgba(199,207,217,.55); margin-top: 3px; line-height: 1.45; }
.bizcp-tool-tag {
  flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 6px; align-self: center;
  background: rgba(52,211,153,.12); color: #34D399; border: 1px solid rgba(52,211,153,.25);
}
.bizcp-tool.is-locked .bizcp-tool-tag { background: rgba(255,255,255,.05); color: rgba(199,207,217,.5); border-color: rgba(255,255,255,.1); }

/* ── Invite row ──────────────────────────────────────────────────── */
.bizcp-invite { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.bizcp-invite .bizcp-input { flex: 1; min-width: 200px; }
.bizcp-role-select { flex: 0 0 120px; }
.bizcp-invite .submit-btn { flex: 0 0 auto; }
.bizcp-invite-result {
  font-size: 12px; color: rgba(199,207,217,.7); margin: 0 0 14px;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(52,211,153,.07); border: 1px solid rgba(52,211,153,.2);
}
.bizcp-code { font-family: ui-monospace, monospace; font-size: 11px; word-break: break-all; color: #9FB0CC; }
.bizcp-code-code { display: inline-block; margin-left: 6px; }

/* ── Roster table ────────────────────────────────────────────────── */
.bizcp-roster-empty { padding: 28px; text-align: center; color: rgba(199,207,217,.4); font-size: 13px; }
.bizcp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bizcp-table thead th {
  text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: rgba(199,207,217,.5);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.bizcp-row td { padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,.04); color: #C7CFD9; }
.bizcp-row.status-suspended td { opacity: .6; }

.bizcp-rolepill, .bizcp-statuspill {
  display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; text-transform: capitalize;
}
.bizcp-rolepill.role-owner  { background: rgba(168,85,247,.14); color: #C084FC; }
.bizcp-rolepill.role-admin  { background: rgba(91,107,255,.14); color: #8FA0FF; }
.bizcp-rolepill.role-member { background: rgba(59,130,246,.12); color: #60A5FA; }
.bizcp-rolepill.role-viewer { background: rgba(148,163,184,.14); color: #94A3B8; }
.bizcp-statuspill.st-active    { background: rgba(34,197,94,.14); color: #34D399; }
.bizcp-statuspill.st-invited   { background: rgba(245,158,11,.14); color: #FBBF24; }
.bizcp-statuspill.st-suspended { background: rgba(239,68,68,.14); color: #F87171; }

.bizcp-actions { white-space: nowrap; }
.bizcp-act {
  padding: 5px 10px; margin-left: 6px; border-radius: 6px; font-size: 11px; font-weight: 600;
  cursor: pointer; background: transparent; border: 1px solid rgba(255,255,255,.12); color: rgba(199,207,217,.7);
  transition: filter .15s;
}
.bizcp-act:hover { filter: brightness(1.3); }
.bizcp-act--warn   { border-color: rgba(245,158,11,.35); color: #FBBF24; }
.bizcp-act--danger { border-color: rgba(239,68,68,.35); color: #F87171; }
.bizcp-act--ok     { border-color: rgba(52,211,153,.35); color: #34D399; }
.bizcp-act:disabled { opacity: .5; cursor: default; }

@media (max-width: 720px) {
  .bizcp-stats { grid-template-columns: repeat(2, 1fr); }
  .bizcp-tools { grid-template-columns: 1fr; }
  .bizcp-table { font-size: 12px; }
}

/* ── APEX All-in-One Workspace (events / incidents / tasks) ─────────── */
.bizcp-workspace { margin-top: 22px; }
.bizcp-ws-locked { padding: 18px 4px; }
.bizcp-ws-create,
.bizcp-ws-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 14px; }
.bizcp-ws-create .bizcp-ws-title-input,
.bizcp-ws-create #bizcp-ws-title { flex: 1; min-width: 220px; }
.bizcp-ws-create select,
.bizcp-ws-filters select { width: auto; min-width: 130px; }
.bizcp-ws-filters { border-top: 1px solid rgba(255,255,255,.06); padding-top: 12px; }

.bizcp-ws-state { color: rgba(199,207,217,.6); font-size: 13px; padding: 16px 4px; }

.bizcp-ws-list { display: flex; flex-direction: column; gap: 10px; }
.bizcp-ws-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 12px 14px; transition: border-color .15s ease;
}
.bizcp-ws-card:hover { border-color: rgba(91,107,255,.35); }
.bizcp-ws-card.prio-critical { border-left: 3px solid #F87171; }
.bizcp-ws-card.prio-high     { border-left: 3px solid #FBBF24; }
.bizcp-ws-card.status-resolved,
.bizcp-ws-card.status-closed { opacity: .7; }

.bizcp-ws-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bizcp-ws-title { font-weight: 600; color: #fff; flex: 1; min-width: 160px; }
.bizcp-ws-src { font-size: 11px; color: #A78BFA; background: rgba(167,139,250,.12); padding: 2px 7px; border-radius: 999px; }

.bizcp-ws-kindpill, .bizcp-ws-priopill, .bizcp-ws-statuspill {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.bizcp-ws-kindpill.k-incident { background: rgba(239,68,68,.14); color: #F87171; }
.bizcp-ws-kindpill.k-threat   { background: rgba(167,139,250,.14); color: #A78BFA; }
.bizcp-ws-kindpill.k-task     { background: rgba(91,107,255,.14); color: #93A4FF; }
.bizcp-ws-kindpill.k-note     { background: rgba(148,163,184,.14); color: #CBD5E1; }
.bizcp-ws-priopill.p-critical { background: rgba(239,68,68,.16); color: #F87171; }
.bizcp-ws-priopill.p-high     { background: rgba(245,158,11,.16); color: #FBBF24; }
.bizcp-ws-priopill.p-normal   { background: rgba(91,107,255,.12); color: #93A4FF; }
.bizcp-ws-priopill.p-low      { background: rgba(148,163,184,.12); color: #CBD5E1; }
.bizcp-ws-statuspill.s-open        { background: rgba(52,211,153,.14); color: #34D399; }
.bizcp-ws-statuspill.s-in_progress { background: rgba(91,107,255,.14); color: #93A4FF; }
.bizcp-ws-statuspill.s-blocked     { background: rgba(245,158,11,.14); color: #FBBF24; }
.bizcp-ws-statuspill.s-resolved,
.bizcp-ws-statuspill.s-closed      { background: rgba(148,163,184,.14); color: #CBD5E1; }

.bizcp-ws-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.bizcp-ws-assignee { font-size: 12px; color: rgba(199,207,217,.65); }

.bizcp-ws-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.bizcp-ws-desc { color: rgba(229,231,235,.92); font-size: 14px; margin: 0 0 12px; white-space: pre-wrap; }
.bizcp-ws-links { font-size: 12px; color: rgba(199,207,217,.7); margin-bottom: 10px; }
.bizcp-ws-link { display: inline-block; background: rgba(91,107,255,.1); border-radius: 6px; padding: 2px 7px; margin: 2px; }
.bizcp-ws-boss, .bizcp-ws-linker, .bizcp-ws-commentbox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.bizcp-ws-boss label { font-size: 12px; color: rgba(199,207,217,.7); display: flex; gap: 6px; align-items: center; }
.bizcp-ws-boss select, .bizcp-ws-linker select { width: auto; min-width: 120px; }
.bizcp-ws-linker .bizcp-ws-link-ref, .bizcp-ws-commentbox .bizcp-ws-comment-input { flex: 1; min-width: 180px; }
.bizcp-ws-share-out { font-size: 12px; margin: 6px 0; }
.bizcp-ws-thread { margin: 12px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.bizcp-ws-comment { background: rgba(255,255,255,.04); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: rgba(229,231,235,.92); }

@media (max-width: 720px) {
  .bizcp-ws-create select, .bizcp-ws-filters select { min-width: 0; flex: 1; }
}