/* ============================================================
   dashboard.css — Client dashboard page
   ============================================================ */

.dash-wrap { padding: 36px 0 80px; }

/* Welcome bar */
.welcome-bar {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       20px 24px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  flex-wrap:     wrap;
  gap:           14px;
  margin-bottom: 28px;
}
.w-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background:    linear-gradient(135deg, #2563eb, #38bdf8);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     1rem;
  color:         #fff;
  flex-shrink:   0;
}
.w-name  { font-weight: 600; font-size: .95rem; }
.w-email { color: var(--muted); font-size: .78rem; }

/* Stats grid */
.stat-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:                   14px;
  margin-bottom:         28px;
}
.stat-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       18px 20px;
  display:       flex;
  align-items:   center;
  gap:           14px;
}
.stat-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1rem;
  flex-shrink:   0;
}
.stat-num { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.stat-lbl { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }

/* Process steps mini */
.how-steps-mini {
  display:       flex;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
  margin-bottom: 24px;
}
.how-step-mini {
  flex:      1;
  padding:   14px 16px;
  text-align: center;
  position:  relative;
  font-size: .78rem;
}
.how-step-mini:not(:last-child)::after {
  content:   '→';
  position:  absolute;
  right:     -8px; top: 50%;
  transform: translateY(-50%);
  color:     var(--border);
  font-size: .9rem;
}
.how-step-mini .step-n {
  width: 24px; height: 24px;
  border-radius:   50%;
  background:      var(--primary);
  color:           #fff;
  font-size:       .7rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 6px;
}
.how-step-mini .step-lbl { color: var(--muted); line-height: 1.4; }
.how-step-mini.active-step .step-n  { background: var(--success); }
.how-step-mini.active-step .step-lbl { color: var(--text); font-weight: 600; }

@media (max-width: 768px) {
  .how-steps-mini { flex-direction: column; }
  .how-step-mini:not(:last-child)::after {
    content:    '↓';
    right:      50%; top: auto; bottom: -10px;
    transform:  translateX(50%);
  }
}

/* Quote banner */
.quote-banner {
  border-radius: var(--radius);
  padding:       20px 24px;
  margin-bottom: 20px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  flex-wrap:     wrap;
  gap:           14px;
}
.quote-banner.pending-quote {
  background: linear-gradient(135deg, rgba(56,189,248,.1), rgba(37,99,235,.06));
  border:     1px solid rgba(56,189,248,.25);
}
.quote-price     { font-size: 1.8rem; font-weight: 800; color: #38bdf8; line-height: 1; }
.quote-price-lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.quote-actions   { display: flex; gap: 8px; }

/* Ticket conversation bubbles */
.ticket-msg-box {
  background:  var(--surface);
  border:      1px solid var(--border);
  border-radius: 9px;
  padding:     13px 15px;
  font-size:   .84rem;
  line-height: 1.65;
  white-space: pre-wrap;
  max-height:  130px;
  overflow-y:  auto;
  color:       var(--text);
  margin-bottom: 16px;
}
.replies-wrap {
  max-height:    260px;
  overflow-y:    auto;
  display:       flex;
  flex-direction: column;
  gap:           10px;
  margin-bottom: 14px;
}
.replies-wrap::-webkit-scrollbar       { width: 3px; }
.replies-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.r-row       { display: flex; flex-direction: column; }
.r-row.mine  { align-items: flex-end; }
.r-row.theirs{ align-items: flex-start; }
.r-bubble {
  padding:       10px 13px;
  border-radius: 10px;
  font-size:     .82rem;
  line-height:   1.6;
  max-width:     84%;
  white-space:   pre-wrap;
}
.r-bubble.mine   { background: rgba(37,99,235,.16); border: 1px solid rgba(37,99,235,.22); color: #bfdbfe; }
.r-bubble.theirs { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.r-meta { font-size: .7rem; color: var(--muted); margin-top: 3px; }