/* ── Team View ── */
.team-view { display: grid; gap: 20px; }

/* Header */
.team-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.team-header__title {
  margin: 0; font-size: 22px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
}
.team-header__icon { width: 24px; height: 24px; color: #8b5cf6; flex-shrink: 0; }
[data-theme="dark"] .team-header__icon { color: #a78bfa; }
.team-header__subtitle { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); }

/* Empty state */
.team-empty { padding: 28px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* Cards grid — 1/2/3 cols responsive */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .team-grid { grid-template-columns: 1fr; } }

/* Card */
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
}
.team-card__top { margin-bottom: 16px; }
.team-card__identity { display: flex; align-items: center; gap: 12px; }

/* Avatar circle — color variants */
.team-card__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.team-card__avatar-icon { width: 20px; height: 20px; }

.team-card__avatar--emerald { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.team-card__avatar--blue    { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.team-card__avatar--violet  { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.team-card__avatar--amber   { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }

[data-theme="dark"] .team-card__avatar--emerald { background: rgba(16,185,129,0.1); color: #34d399; border-color: rgba(16,185,129,0.2); }
[data-theme="dark"] .team-card__avatar--blue    { background: rgba(37,99,235,0.1);  color: #60a5fa; border-color: rgba(37,99,235,0.2); }
[data-theme="dark"] .team-card__avatar--violet  { background: rgba(139,92,246,0.1); color: #a78bfa; border-color: rgba(139,92,246,0.2); }
[data-theme="dark"] .team-card__avatar--amber   { background: rgba(217,119,6,0.1);  color: #fbbf24; border-color: rgba(217,119,6,0.2); }

.team-card__name { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }

/* Badges row */
.team-card__badges { display: flex; align-items: center; gap: 6px; margin-top: 4px; }

.team-badge {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 500; border: 1px solid;
}
.team-badge--emerald { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.team-badge--blue    { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.team-badge--violet  { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.team-badge--amber   { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.team-badge--inactive {
  background: var(--bg-hover); color: var(--text-muted); border-color: var(--border);
}

[data-theme="dark"] .team-badge--emerald { background: rgba(16,185,129,0.1); color: #34d399; border-color: rgba(16,185,129,0.2); }
[data-theme="dark"] .team-badge--blue    { background: rgba(37,99,235,0.1);  color: #60a5fa; border-color: rgba(37,99,235,0.2); }
[data-theme="dark"] .team-badge--violet  { background: rgba(139,92,246,0.1); color: #a78bfa; border-color: rgba(139,92,246,0.2); }
[data-theme="dark"] .team-badge--amber   { background: rgba(217,119,6,0.1);  color: #fbbf24; border-color: rgba(217,119,6,0.2); }

/* Clock-in status */
.team-clock-status {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-radius: 8px; margin-top: 12px;
  font-size: 12px;
}
.team-clock-status--active {
  background: #ecfdf5; border: 1px solid #a7f3d0;
}
.team-clock-status--off {
  background: var(--bg-hover); border: 1px solid var(--border);
}
[data-theme="dark"] .team-clock-status--active {
  background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.2);
}
.team-clock-status__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 3px;
}
.team-clock-status--active .team-clock-status__dot {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
  animation: team-pulse 2s ease-in-out infinite;
}
.team-clock-status--off .team-clock-status__dot {
  background: var(--text-muted); opacity: 0.4;
}
@keyframes team-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
  50% { box-shadow: 0 0 0 6px rgba(16,185,129,0.1); }
}
.team-clock-status__info {
  display: flex; flex-direction: column; gap: 2px;
}
.team-clock-status--active .team-clock-status__label {
  color: #059669; font-weight: 500;
}
[data-theme="dark"] .team-clock-status--active .team-clock-status__label { color: #34d399; }
.team-clock-status--off .team-clock-status__label {
  color: var(--text-muted); font-style: italic;
}
.team-clock-status__task {
  color: var(--text-primary); font-weight: 500; font-size: 12px;
}
.team-clock-status__desc {
  color: var(--text-secondary); font-size: 11px;
}

/* Stats 2-col inside card */
.team-card__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: auto;
}
.team-card__stat-label {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-secondary); margin-bottom: 4px;
}
.team-card__stat-icon { width: 12px; height: 12px; }
.team-card__stat-value {
  font-size: 20px; font-weight: 600; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.team-card__stat-value--sales { color: #059669; }
[data-theme="dark"] .team-card__stat-value--sales { color: #34d399; }
.team-card__stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Sales History table card */
.team-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.team-table-card__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid var(--border); background: var(--bg-base);
}
.team-table-card__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-primary); }

/* Filter dropdown */
.team-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.team-filter { position: relative; display: flex; align-items: center; }
.team-filter__icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--text-muted); pointer-events: none;
}
.team-filter__date {
  padding: 7px 10px; font-size: 13px; color: var(--text-primary);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  transition: border-color .15s;
}
.team-filter__date:focus {
  outline: none; box-shadow: 0 0 0 3px rgba(139,92,246,0.15); border-color: rgba(139,92,246,0.5);
}
.team-filter__select {
  padding: 7px 32px 7px 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; color: var(--text-primary);
  appearance: none; -webkit-appearance: none;
  cursor: pointer; transition: border-color .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.team-filter__select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
  border-color: rgba(139,92,246,0.5);
}

/* Table */
.team-table-wrap { overflow-x: auto; }
.team-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }

.team-table thead { background: var(--bg-base); border-bottom: 1px solid var(--border); }
.team-table th {
  padding: 12px 20px; font-size: 12px; font-weight: 500;
  color: var(--text-secondary); white-space: nowrap;
}
.team-table td { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.team-table tbody tr:last-child td { border-bottom: none; }
.team-table tbody tr { transition: background .12s; }
.team-table tbody tr:hover { background: var(--bg-hover); }

.team-table__right { text-align: right; }
.team-table__date { color: var(--text-secondary); white-space: nowrap; }
.team-table__part { color: var(--text-primary); font-weight: 500; }
.team-table__vehicle { color: var(--text-secondary); font-size: 12px; }
.team-table__dim { color: var(--text-muted); }
.team-table__person { color: var(--text-secondary); }
.team-table__price {
  font-weight: 500; color: #059669; font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .team-table__price { color: #34d399; }

.team-table__empty {
  padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 14px;
}

/* Payment badge */
.team-payment-badge {
  display: inline-block; padding: 3px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 500;
  background: var(--bg-hover); color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* ── Mobile polish ── */
@media (max-width: 640px) {
  .team-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .team-header__title { font-size: 18px; }
  .team-card { padding: 14px; }
  .team-card__stat-value { font-size: 16px; }
  .team-card__stat-label { font-size: 11px; }
  .team-table-card__head { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; }
  .team-table-card__title { font-size: 14px; }
  .team-filters { width: 100%; }
  .team-filter__date, .team-filter__select { width: 100%; font-size: 12px; }
  .team-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .team-table { min-width: 0; }
  .team-table th, .team-table td { padding: 8px 12px; font-size: 12px; }
}