/* ============================================
   SMARTQ — dashboard.css
   ============================================ */

.page-header.dash-header {
  background: var(--blue-dark);
  padding: 110px 0 30px;
}
.page-breadcrumb { font-size: 13px; color: rgba(255,255,255,.5); }
.page-breadcrumb a { color: rgba(255,255,255,.7); text-decoration: none; }
.page-breadcrumb a:hover { color: #fff; }
.page-breadcrumb i { font-size: 10px; }
.page-title { font-size: clamp(24px, 3.5vw, 30px); font-weight: 700; color: #fff; }
.page-sub { font-size: 14.5px; color: rgba(255,255,255,.6); }

.dash-main { padding: 30px 0 60px; }

/* ---- Navbar user chip ---- */
.user-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1);
  padding: 6px 14px 6px 6px;
  border-radius: 30px;
  color: #fff; font-size: 13.5px; font-weight: 500;
}
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blue-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}

/* ---- Stat cards ---- */
.dash-stat-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 18px; text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.dash-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(26,86,164,.1); }
.dash-stat-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  margin: 0 auto 10px;
}
.dash-stat-icon.blue   { background: var(--blue-light);   color: var(--blue); }
.dash-stat-icon.amber  { background: var(--amber-light);  color: #92400E; }
.dash-stat-icon.green  { background: var(--green-light);  color: var(--green); }
.dash-stat-icon.purple { background: var(--purple-light); color: var(--purple); }
.dash-stat-num { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--text-dark); }
.dash-stat-lbl { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ---- Generic dash card ---- */
.dash-card {
  background: #fff; border-radius: 18px; padding: 24px;
  box-shadow: 0 8px 32px rgba(13,46,110,.07);
}

/* ---- Active token box ---- */
.active-token-box {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px;
}
.ld-label { font-size: 10.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.active-token-num { font-family: var(--font-head); font-size: 36px; font-weight: 800; color: var(--blue); letter-spacing: -1px; }
.text-amber { color: var(--amber) !important; }
.progress { background: var(--blue-light); border-radius: 4px; }
.progress-bar { background: var(--blue-accent) !important; border-radius: 4px; }

.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-light); color: var(--green);
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 20px;
}
.live-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; animation: pulseDot 1.5s infinite; }
@keyframes pulseDot { 0%,100% {opacity:1} 50% {opacity:.4} }

.btn-outline-sq {
  background: #fff; color: var(--text-dark);
  border: 1.5px solid var(--border);
  font-size: 13.5px; font-weight: 600;
  padding: 9px 18px; border-radius: 9px;
  transition: background .2s, border-color .2s;
}
.btn-outline-sq:hover { background: var(--bg); border-color: #c5d4e5; }

/* ---- History table ---- */
.history-filter { display: flex; gap: 6px; }
.filter-chip {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 12.5px; font-weight: 500;
  padding: 5px 14px; border-radius: 20px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.filter-chip.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.filter-chip:hover:not(.active) { border-color: #b8d4ef; }

.dash-table { font-size: 13.5px; }
.dash-table thead th {
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.dash-table tbody td { padding: 12px 8px; border-bottom: 1px solid var(--border); color: var(--text-dark); }
.dash-table tbody tr:last-child td { border-bottom: none; }
.history-token { font-family: var(--font-head); font-weight: 700; }
.history-status {
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
  display: inline-block;
}
.history-status.completed { background: var(--green-light); color: #065F46; }
.history-status.cancelled { background: #FEF2F2; color: #991B1B; }
.history-status.waiting   { background: var(--amber-light); color: #92400E; }

/* ---- Profile ---- */
.profile-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  font-family: var(--font-head);
}
.profile-info-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--text-muted);
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.profile-info-row:last-of-type { border-bottom: none; }
.profile-info-row i { color: var(--blue); width: 16px; }

/* ---- Responsive ---- */
@media (max-width: 767px) {
  .page-header.dash-header { padding: 90px 0 24px; }
  .dash-card { padding: 18px; }
  .active-token-num { font-size: 28px; }
}