/* ============================================================
   VYXORA — Dashboard PC (reconstrução visual completa)
   Namespace isolado (.vxd-*) — não reaproveita CSS do dashboard antigo.
   Este arquivo controla APENAS a experiência Desktop (>=901px).
   Abaixo de 901px o dashboard antigo (.vxd-legacy) volta a ser exibido
   intacto — é o que o Android/WebApp continua usando.
   ============================================================ */

.vxd-pc { display: none; }

@media (min-width: 901px) {
  .vxd-legacy { display: none !important; }
  .vxd-pc { display: block; animation: vxdFadeIn .5s ease; }
}

@keyframes vxdFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.vxd-pc * { box-sizing: border-box; }

/* ---------- KPI cards — quadrados, premium, sem sparkline ---------- */
.vxd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 12px; }

.vxd-kpi {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), var(--bg1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px 20px 18px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.vxd-kpi:hover { border-color: #2a3548; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }
.vxd-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 6px 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.vxd-kpi-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text3); font-weight: 700; min-width: 0; }
.vxd-kpi-delta { font-size: 10.5px; font-weight: 700; font-family: 'Geist', sans-serif; padding: 2px 7px; border-radius: 4px; background: var(--surface2); color: var(--text3); white-space: nowrap; flex-shrink: 0; }
.vxd-kpi-delta.up { color: var(--green); background: var(--green-bg); }
.vxd-kpi-delta.down { color: var(--red); background: var(--red-bg); }
.vxd-kpi-value { font-family: 'Instrument Serif', serif; font-size: 34px; line-height: 1.05; color: var(--text); margin-top: 16px; position: relative; z-index: 1; }

/* ---------- Substrip (6 chips de status) ---------- */
.vxd-substrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.vxd-chip {
  background: var(--bg1); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
}
.vxd-chip-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text4); font-weight: 700; }
.vxd-chip-value { font-family: 'Geist', sans-serif; font-size: 17px; font-weight: 800; color: var(--text); }
.vxd-chip-value.tone-yellow { color: var(--yellow); }
.vxd-chip-value.tone-green { color: var(--green); }
.vxd-chip-value.tone-blue { color: var(--blue); }
.vxd-chip-value.tone-purple { color: var(--purple); }
.vxd-chip-value.tone-red { color: var(--red); }

/* ---------- Grid principal ---------- */
.vxd-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto; gap: 16px; align-items: stretch; }

.vxd-recent-card, .vxd-activity-card {
  background: var(--bg1); border: 1px solid var(--border); border-radius: 18px; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 22px 22px 20px;
  min-width: 0; /* impede que o item do grid force o card a "vazar" pra fora da coluna — é essa a causa do texto cortado */
}
.vxd-recent-card::after {
  content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, var(--surface2), transparent 55%); pointer-events: none;
}

/* Card "Agendamentos recentes" — sem gráfico, só tabela, mesma paleta do resto do painel */
.vxd-recent-card { grid-column: 1; grid-row: 1; }
.vxd-card-title-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.vxd-recent-table { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.vxd-recent-head, .vxd-recent-row { display: grid; grid-template-columns: 1.3fr 1.1fr 0.8fr 0.7fr 0.9fr; gap: 12px; align-items: center; padding: 11px 6px; }
.vxd-recent-head { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text4); font-weight: 700; border-bottom: 1px solid var(--border); }
.vxd-recent-row { border-bottom: 1px solid var(--border); font-size: 12.5px; }
.vxd-recent-row:last-child { border-bottom: none; }
.vxd-recent-cliente { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxd-recent-servico { color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxd-recent-data { color: var(--text3); font-family: 'Geist', sans-serif; font-size: 11.5px; }
.vxd-recent-valor { color: var(--text2); font-family: 'Geist', sans-serif; font-weight: 700; }
.vxd-recent-status { padding: 3px 9px; border-radius: 100px; font-size: 10.5px; font-weight: 700; text-align: center; width: fit-content; }
.vxd-recent-status.st-confirmado { background: var(--green-bg); color: var(--green); }
.vxd-recent-status.st-pendente { background: var(--yellow-bg); color: var(--yellow); }
.vxd-recent-status.st-concluido { background: var(--accent4); color: var(--accent2); }
.vxd-recent-status.st-recusado { background: var(--red-bg); color: var(--red); }
.vxd-recent-status.st-reagendado { background: var(--surface2); color: var(--text3); }

/* Activity card */
.vxd-activity-card { grid-column: 2; grid-row: 1; }
.vxd-card-title { position: relative; z-index: 1; font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.vxd-activity-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; }
.vxd-activity-item { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-radius: 10px; transition: background .15s; }
.vxd-activity-item:hover { background: var(--surface); }
.vxd-activity-icon { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--accent4); border: 1px solid var(--accent-border); color: var(--accent2); }
.vxd-activity-icon.tone-green { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.vxd-activity-icon.tone-yellow { background: var(--yellow-bg); border-color: var(--yellow-border); color: var(--yellow); }
.vxd-activity-icon.tone-blue { background: var(--blue-bg); border-color: var(--blue-border); color: var(--blue); }
.vxd-activity-icon.tone-red { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }
.vxd-activity-body { min-width: 0; flex: 1; }
.vxd-activity-title { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxd-activity-sub { font-size: 10.5px; color: var(--text4); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxd-activity-time { font-size: 10px; color: var(--text3); flex-shrink: 0; white-space: nowrap; font-weight: 600; }

.vxd-empty { position: relative; z-index: 1; padding: 30px 10px; text-align: center; color: var(--text4); font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  .vxd-pc, .vxd-kpi { animation: none !important; transition: none !important; }
}