/* ═══════════════════════════════════════════════════════
   TradeForge — Unified Supplier Operations CSS
   Shared status system, request flow pipeline, and
   consistent visual patterns across all supplier dashboards.
   ═══════════════════════════════════════════════════════ */

/* ── Unified Status Badges ──
   Used across supplier dashboards, project workspace, and request feeds.
   Classes: .tf-status .tf-status--{state}
   States: submitted, reviewed, quoted, scheduled, completed, open, pending, urgent
──────────────────────────────── */
.tf-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.tf-status--submitted,
.tf-status--open {
  background: rgba(74, 222, 128, .12);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, .22);
}
.tf-status--reviewed,
.tf-status--pending {
  background: rgba(251, 191, 36, .12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, .22);
}
.tf-status--quoted {
  background: rgba(96, 165, 250, .12);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, .22);
}
.tf-status--scheduled {
  background: rgba(140, 106, 62, .14);
  color: var(--bronze, #8C6A3E);
  border: 1px solid rgba(140, 106, 62, .30);
}
.tf-status--completed {
  background: rgba(106, 191, 105, .12);
  color: #6abf69;
  border: 1px solid rgba(106, 191, 105, .22);
}
.tf-status--inactive,
.tf-status--unavailable {
  background: rgba(181, 183, 185, .08);
  color: var(--muted, #b5b7b9);
  border: 1px solid rgba(181, 183, 185, .18);
}
.tf-status--urgent {
  background: rgba(248, 113, 113, .12);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, .22);
}
.tf-status--incoming {
  background: rgba(59, 130, 246, .14);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, .22);
}

/* ── Unified Flow Pipeline ──
   Visual step indicator: Created → Routed → Supplier → Scheduled → Completed
   Used inside request cards across all views.
──────────────────────────────── */
.tf-flow {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(46, 49, 54, .5);
  border: 1px solid rgba(181, 183, 185, .06);
  border-radius: 8px;
}
.tf-flow-step {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(181, 183, 185, .35);
  padding: 3px 8px;
  white-space: nowrap;
  position: relative;
}
.tf-flow-step::after {
  content: '';
  display: block;
  width: 14px;
  height: 1px;
  background: rgba(181, 183, 185, .12);
  flex-shrink: 0;
}
.tf-flow-step:last-child::after { display: none; }

.tf-flow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(181, 183, 185, .18);
  background: transparent;
  flex-shrink: 0;
  transition: all .15s;
}
/* Completed step */
.tf-flow-step.done {
  color: var(--bronze, #8C6A3E);
}
.tf-flow-step.done .tf-flow-dot {
  background: var(--bronze, #8C6A3E);
  border-color: var(--bronze, #8C6A3E);
  box-shadow: 0 0 0 2px rgba(140, 106, 62, .12);
}
/* Current step */
.tf-flow-step.active {
  color: #fff;
  font-weight: 700;
}
.tf-flow-step.active .tf-flow-dot {
  background: #fff;
  border-color: var(--bronze, #8C6A3E);
  box-shadow: 0 0 0 2px rgba(140, 106, 62, .18);
}

/* ── Unified Request Card Layout ──
   Standardized card for material + waste request display
──────────────────────────────── */
.tf-req-card {
  background: linear-gradient(180deg, rgba(46,49,54,.96), rgba(46,49,54,.82));
  border: 1px solid rgba(181, 183, 185, .08);
  border-radius: var(--r, 14px);
  padding: 18px 20px;
  transition: border-color .15s;
}
.tf-req-card:hover {
  border-color: rgba(140, 106, 62, .3);
}
.tf-req-card + .tf-req-card { margin-top: 10px; }
/* Urgency left-border accent */
.tf-req-card--urgent { border-left: 3px solid #f87171; }
.tf-req-card--high { border-left: 3px solid #fbbf24; }

.tf-req-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.tf-req-card-body { flex: 1; min-width: 0; }
.tf-req-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.tf-req-card-refrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.tf-request-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(181,183,185,.82);
  background: rgba(181,183,185,.08);
  border: 1px solid rgba(181,183,185,.14);
}
.tf-project-ref {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: var(--bronze, #8C6A3E);
  background: rgba(140,106,62,.11);
  border: 1px solid rgba(140,106,62,.22);
}
.tf-project-ref svg {
  width: 11px;
  height: 11px;
  opacity: .78;
}
.tf-req-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12.5px;
  color: var(--muted, rgba(181,183,185,.72));
  margin-bottom: 8px;
}
.tf-req-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tf-req-card-meta svg {
  width: 13px;
  height: 13px;
  opacity: .6;
  flex-shrink: 0;
}
.tf-req-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Category tags */
.tf-tag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
}
.tf-tag--category {
  background: rgba(140, 106, 62, .12);
  color: var(--bronze, #8C6A3E);
  border: 1px solid rgba(140, 106, 62, .2);
}
.tf-tag--waste {
  background: rgba(74, 222, 128, .08);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, .18);
}
.tf-tag--urgent {
  background: rgba(220, 90, 70, .1);
  color: rgba(220, 120, 100, .95);
  border: 1px solid rgba(220, 90, 70, .18);
}
.tf-tag--new {
  background: rgba(90, 130, 180, .1);
  color: rgba(130, 170, 220, .9);
  border: 1px solid rgba(90, 130, 180, .18);
}
.tf-tag--pending {
  background: rgba(220, 180, 70, .1);
  color: rgba(220, 190, 100, .9);
  border: 1px solid rgba(220, 180, 70, .18);
}

/* Card details grid (waste-specific info) */
.tf-req-card-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  margin: 10px 0;
  font-size: 13px;
}
.tf-req-detail-label {
  color: rgba(181, 183, 185, .5);
  white-space: nowrap;
}
.tf-req-detail-value {
  color: rgba(181, 183, 185, .85);
}

/* Card actions row */
.tf-req-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(181, 183, 185, .06);
  flex-wrap: wrap;
}
.tf-detail-grid {
  display: grid;
  gap: 14px;
}
.tf-detail-section {
  padding: 12px 14px;
  border: 1px solid rgba(181,183,185,.08);
  border-radius: 10px;
  background: rgba(46,49,54,.5);
}
.tf-detail-section-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .45px;
  text-transform: uppercase;
  color: var(--muted, rgba(181,183,185,.6));
}

/* Shared supplier action buttons */
.tf-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(140, 106, 62, .4);
  border-radius: 999px;
  background: transparent;
  color: var(--bronze, #8C6A3E);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 16px;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  letter-spacing: .02em;
}
.tf-action-btn:hover {
  background: rgba(140, 106, 62, .12);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.tf-action-btn--primary {
  background: var(--bronze, #8C6A3E);
  color: var(--ink, #0f1114);
  border-color: var(--bronze, #8C6A3E);
}
.tf-action-btn--primary:hover {
  box-shadow: 0 3px 10px rgba(140, 106, 62, .25);
  opacity: .92;
}
.tf-action-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.tf-action-btn svg { width: 13px; height: 13px; }

/* Card description / summary line */
.tf-req-card-desc {
  font-size: 12.5px;
  color: var(--muted, rgba(181,183,185,.6));
  margin-top: 6px;
}

/* ── Supplier Assignment Indicator (project workspace) ── */
.tf-supplier-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bronze, #8C6A3E);
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(140, 106, 62, .06);
  border: 1px solid rgba(140, 106, 62, .15);
  text-decoration: none;
  transition: all .15s;
}
.tf-supplier-link:hover {
  background: rgba(140, 106, 62, .12);
  border-color: rgba(140, 106, 62, .3);
}
.tf-supplier-link svg {
  width: 12px;
  height: 12px;
}

/* ── Supplier Request Count Badge (project workspace) ── */
.tf-supplier-req-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(140, 106, 62, .15);
  color: var(--bronze, #8C6A3E);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(140, 106, 62, .25);
}

/* ── Demo Guidance Layer ── */
.tf-demo-shell {
  margin: 2px 0 12px;
  display: grid;
  gap: 10px;
}
.tf-demo-intro {
  border: 1px solid rgba(181, 183, 185, .2);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(46, 49, 54, .95), rgba(46, 49, 54, .8));
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}
.tf-demo-intro strong {
  color: #fff;
  font-size: 13px;
}
.tf-demo-intro p {
  margin: 6px 0 0;
  color: var(--muted, rgba(181,183,185,.72));
  font-size: 12px;
}
.tf-demo-purpose,
.tf-first-step,
.tf-demo-flow {
  color: var(--ash, #d3d4d6);
}
.tf-demo-note {
  color: var(--bronze, #8C6A3E);
}
.tf-demo-dismiss {
  border: 1px solid rgba(181, 183, 185, .2);
  background: transparent;
  color: var(--muted, rgba(181,183,185,.72));
  border-radius: 999px;
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
}
.tf-demo-dismiss:hover {
  color: #fff;
  border-color: rgba(181, 183, 185, .34);
}
.tf-demo-nav {
  border: 1px solid rgba(181, 183, 185, .14);
  border-radius: 12px;
  background: rgba(28, 30, 33, .45);
  padding: 9px 11px;
}
.tf-demo-nav p {
  margin: 0;
  color: var(--muted, rgba(181,183,185,.72));
  font-size: 12px;
}
.tf-demo-nav p strong {
  color: #fff;
}
.tf-demo-nav-steps {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.tf-demo-nav-step {
  border: 1px solid rgba(181, 183, 185, .16);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--muted, rgba(181,183,185,.72));
  background: rgba(15, 17, 20, .35);
}
.tf-demo-nav-step.active {
  border-color: rgba(140, 106, 62, .45);
  color: #fff;
  background: rgba(140, 106, 62, .2);
}
.tf-demo-action.tf-demo-action--key {
  border-width: 2px;
  box-shadow: inset 0 0 0 1px rgba(140, 106, 62, .18);
}
.tf-demo-actions-card {
  margin-bottom: 12px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .tf-req-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .tf-flow {
    flex-wrap: wrap;
    gap: 4px;
  }
  .tf-flow-step::after { width: 10px; }
  .tf-req-card-details { grid-template-columns: 1fr; }
  .tf-req-card-meta { gap: 4px 10px; }
  .tf-demo-intro {
    flex-direction: column;
  }
  .tf-demo-dismiss {
    align-self: flex-start;
  }
}
@media (max-width: 520px) {
  .tf-req-card-actions { flex-direction: column; }
  .tf-action-btn { justify-content: center; }
  .tf-flow-step { font-size: 10px; padding: 2px 5px; }
  .tf-req-card-refrow { gap: 6px; }
  .tf-request-ref,
  .tf-project-ref { font-size: 9px; }
  .tf-demo-nav-step {
    width: 100%;
    text-align: center;
  }
}