/* ============================================================
   topdevphone — Services app styles
   ============================================================ */

.svc-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-card-lg);
  padding: 13px 14px 12px;
  margin-bottom: 12px;
}

.svc-head { display: flex; align-items: center; gap: 12px; }

.svc-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.svc-info { flex: 1; min-width: 0; }
.svc-name {
  font-size: 15px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svc-number { font-size: 12.5px; color: var(--text-secondary); margin-top: 1px; }

/* on-duty badge: green when staffed, gray when empty */
.svc-duty {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-secondary) 14%, transparent);
  border-radius: 12px; padding: 4px 9px;
}
.svc-duty .svc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-tertiary); flex: 0 0 auto;
}
.svc-duty.on {
  color: var(--accent-green);
  background: color-mix(in srgb, var(--accent-green) 16%, transparent);
}
.svc-duty.on .svc-dot {
  background: var(--accent-green);
  box-shadow: 0 0 6px var(--accent-green);
}

.svc-actions { display: flex; gap: 8px; margin-top: 12px; }
.svc-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 0; border-radius: 10px;
  font-size: 12.5px; font-weight: 700;
  background: var(--bg-tertiary); color: var(--text-primary);
  transition: filter 0.15s, transform 0.1s;
}
.svc-btn:active { transform: scale(0.97); filter: brightness(0.85); }
.svc-btn .ic { width: 14px; height: 14px; }
.svc-btn.accent { background: var(--accent-blue); color: #fff; }

/* dispatch modal bits */
.svc-modal-hint {
  text-align: center; color: var(--text-secondary);
  font-size: 12.5px; margin-bottom: 12px;
}
.svc-detail { margin-bottom: 14px; }
.svc-detail-from { text-align: center; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.svc-detail-from .mono { color: var(--text-secondary); font-weight: 600; }
.svc-detail-text {
  background: var(--bg-tertiary); border-radius: 12px; padding: 12px;
  font-size: 13.5px; color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word;
}

/* home-screen widget */
.svc-widget { display: flex; flex-direction: column; gap: 7px; }
.svc-w-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.svc-w-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(128, 128, 140, 0.8); flex: 0 0 auto;
}
.svc-w-dot.on { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); }
.svc-w-name {
  flex: 1; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svc-w-count { color: var(--text-secondary); font-size: 11.5px; font-weight: 600; }