/* ============================================================
   prolancer-bridge.css — TRANSITIONAL (Prolancer Phase 1+)
   clientflow.css + prolancer.css co-load; prolancer wins globally,
   so we re-assert clientflow's base components INSIDE *un-migrated* content only.
   Content rules are guarded with :not([data-skin="prolancer"]) so a page that
   sets {% block content_skin %}prolancer{% endblock %} renders pure Prolancer.
   Load order on every shell page: clientflow.css -> prolancer.css -> this.
   DELETE this file in Phase 11 when clientflow.css is retired.
   ============================================================ */

/* ── Shell shims (Prolancer chrome) ──────────────────────────────
   Small bridges for the re-skinned shell, not content. Move into the
   migrated templates/prolancer.css over later phases; delete with this
   file in Phase 11.

   Breadcrumbs: prolancer styles the current crumb as `.cur`, but ~30
   child templates still emit `{% block breadcrumbs %}...<span class="current">`.
   Until those templates are swept to `.cur`, give `.current` the same
   treatment so the active page stays highlighted. */
.topbar .crumbs .current {
  color: var(--text-primary);
  font-weight: 500;
}

/* Mobile sidebar: prolancer hides .sidebar at <=1024px (display:none), which
   defeats clientflow's transform-based slide-in. When Alpine adds .mobile-open,
   show it as a fixed full-height overlay. (Transitional; revisit when the shell
   gets a dedicated responsive pass.) */
@media (max-width: 1024px) {
  .sidebar.mobile-open {
    display: flex !important;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: var(--z-sidebar, 200);
    transform: translateX(0);
  }
}

/* Buttons */
.page-content:not([data-skin="prolancer"]) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--cf-transition-fast);
  /* Neutralize prolancer's bare .btn box-metrics — clientflow's base .btn sets
     none of these; they live on the modifiers below, which we re-assert. */
  height: auto;            /* prolancer hard-sets 40px; clientflow uses min-height floor */
  padding: 0;              /* prolancer: 0 var(--space-4) — modifiers re-set this */
  border-radius: 0;        /* prolancer: var(--radius-button) — modifiers re-set this */
  font-size: 13px;         /* prolancer: var(--text-sm); clientflow modifiers use 13px */
  font-weight: 500;        /* prolancer: 500 via shorthand; clientflow modifiers use 500 */
}

/* Touch-friendly targets — 44px minimum by default (mobile-first) */
.page-content:not([data-skin="prolancer"]) .btn {
  min-height: 44px;
  min-width: 44px;
}

/* Re-assert clientflow's button modifiers — prolancer's bare .btn box-metrics
   (height/padding/border-radius/font/border) would otherwise win for content
   buttons, since clientflow's base .btn sets none of them. Values mirror
   clientflow.css .btn-* rules verbatim. */
.page-content:not([data-skin="prolancer"]) .btn-primary {
  border-radius: var(--cf-radius-md);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
}

.page-content:not([data-skin="prolancer"]) .btn-secondary {
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-md);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
}

.page-content:not([data-skin="prolancer"]) .btn-ghost {
  border-radius: var(--cf-radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
}

.page-content:not([data-skin="prolancer"]) .btn-danger {
  border: 1px solid var(--cf-danger-text);
  border-radius: var(--cf-radius-md);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
}

.page-content:not([data-skin="prolancer"]) .btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.page-content:not([data-skin="prolancer"]) .btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--cf-radius-sm);
}

.page-content:not([data-skin="prolancer"]) .btn-text {
  font-size: 13px;
  font-weight: 500;
  padding: 0;
}

/* Cards */
.page-content:not([data-skin="prolancer"]) .card {
  background: var(--cf-surface);
  border: none; /* boundary comes from --cf-shadow-card's inset ring */
  border-radius: var(--r-md);
  box-shadow: var(--cf-shadow-card);
}

/* Status Indicators */
.page-content:not([data-skin="prolancer"]) .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border-radius: var(--cf-radius-full);
  font-size: 12px;
  font-weight: 500;
}

.page-content:not([data-skin="prolancer"]) .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Draft / Not Started */
.page-content:not([data-skin="prolancer"]) .status--draft,
.page-content:not([data-skin="prolancer"]) .status--not_started {
  background: rgba(113, 113, 122, 0.12);
  color: var(--cf-gray-500);
}

.page-content:not([data-skin="prolancer"]) .status--draft .status-dot,
.page-content:not([data-skin="prolancer"]) .status--not_started .status-dot {
  background: var(--cf-gray-500);
}

/* Active / In Progress */
.page-content:not([data-skin="prolancer"]) .status--active,
.page-content:not([data-skin="prolancer"]) .status--in_progress {
  background: var(--cf-accent-subtle);
  color: var(--cf-accent-500);
}

.page-content:not([data-skin="prolancer"]) .status--active .status-dot,
.page-content:not([data-skin="prolancer"]) .status--in_progress .status-dot {
  background: var(--cf-accent-400);
}

/* On Hold */
.page-content:not([data-skin="prolancer"]) .status--on_hold {
  background: var(--cf-warning-fill);
  color: var(--cf-warning-text);
}

.page-content:not([data-skin="prolancer"]) .status--on_hold .status-dot {
  background: var(--cf-warning-dot);
}

/* Completed / Approved / Resolved */
.page-content:not([data-skin="prolancer"]) .status--completed,
.page-content:not([data-skin="prolancer"]) .status--approved,
.page-content:not([data-skin="prolancer"]) .status--resolved {
  background: var(--cf-success-fill);
  color: var(--cf-success-text);
}

.page-content:not([data-skin="prolancer"]) .status--completed .status-dot,
.page-content:not([data-skin="prolancer"]) .status--approved .status-dot,
.page-content:not([data-skin="prolancer"]) .status--resolved .status-dot {
  background: var(--cf-success-dot);
}

/* Blocked / Open / Disputed / Rejected */
.page-content:not([data-skin="prolancer"]) .status--blocked,
.page-content:not([data-skin="prolancer"]) .status--open,
.page-content:not([data-skin="prolancer"]) .status--disputed,
.page-content:not([data-skin="prolancer"]) .status--rejected {
  background: var(--cf-danger-fill);
  color: var(--cf-danger-text);
}

.page-content:not([data-skin="prolancer"]) .status--blocked .status-dot,
.page-content:not([data-skin="prolancer"]) .status--open .status-dot,
.page-content:not([data-skin="prolancer"]) .status--disputed .status-dot,
.page-content:not([data-skin="prolancer"]) .status--rejected .status-dot {
  background: var(--cf-danger-dot);
}

/* Archived / Cancelled / Dismissed */
.page-content:not([data-skin="prolancer"]) .status--archived,
.page-content:not([data-skin="prolancer"]) .status--cancelled,
.page-content:not([data-skin="prolancer"]) .status--dismissed {
  background: rgba(82, 82, 91, 0.12);
  color: var(--cf-gray-400);
}

.page-content:not([data-skin="prolancer"]) .status--archived .status-dot,
.page-content:not([data-skin="prolancer"]) .status--cancelled .status-dot,
.page-content:not([data-skin="prolancer"]) .status--dismissed .status-dot {
  background: var(--cf-gray-400);
}

/* In Review / Requested */
.page-content:not([data-skin="prolancer"]) .status--in_review,
.page-content:not([data-skin="prolancer"]) .status--requested {
  background: var(--cf-info-fill);
  color: var(--cf-info-text);
}

.page-content:not([data-skin="prolancer"]) .status--in_review .status-dot,
.page-content:not([data-skin="prolancer"]) .status--requested .status-dot {
  background: var(--cf-info-dot);
}

/* Tabs */
.page-content:not([data-skin="prolancer"]) .tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--cf-border);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.page-content:not([data-skin="prolancer"]) .tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cf-text-tertiary);
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  transition: color var(--cf-transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-content:not([data-skin="prolancer"]) .tab:hover {
  color: var(--cf-text-primary);
}

.page-content:not([data-skin="prolancer"]) .tab.active {
  color: var(--cf-accent-400);
}

.page-content:not([data-skin="prolancer"]) .tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cf-accent-400);
  border-radius: 1px 1px 0 0;
}

.page-content:not([data-skin="prolancer"]) .tab-count {
  font-size: 11px;
  background: var(--cf-surface-3);
  padding: 1px 6px;
  border-radius: var(--cf-radius-full);
}

/* .tab-pane is clientflow's name (used by content templates); prolancer's
   .tabpanel is behaviorally equivalent and intentionally left to prolancer. */
.page-content:not([data-skin="prolancer"]) .tab-pane {
  display: none;
}

.page-content:not([data-skin="prolancer"]) .tab-pane.active {
  display: block;
}