/* Hórus Barbearia · CRM de retorno · view AppBarber
   Todo seletor prefixado com .v-appbarber. Sequência de cards: conexão (herói), contagens do
   que vem de lá, divisão de responsabilidade + passo a passo lado a lado, horários de hoje em
   leitura, consumo do pacote e os requisitos da AppBarber. Só tokens de css/tokens.css. */

.v-appbarber { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.v-appbarber > .page-head { margin-bottom: 8px; }
.v-appbarber .card__head { flex-wrap: wrap; }
.v-appbarber .card__sub { max-width: 640px; }

/* ---------- 1. conexão ---------- */
.v-appbarber__conn-top { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.v-appbarber__ico {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--green-tint); color: var(--green-400);
  display: inline-flex; align-items: center; justify-content: center;
}
.v-appbarber__conn-main { flex: 1 1 auto; min-width: 0; }
.v-appbarber__conn-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.v-appbarber__state {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px;
  border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.v-appbarber__state.is-on { border-color: color-mix(in srgb, var(--green) 40%, transparent); color: var(--green-400); }
.v-appbarber__conn-text { font-size: 14px; color: var(--text-2); line-height: 1.5; margin-top: 8px; max-width: 760px; }
.v-appbarber__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.v-appbarber__meta-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-3); min-width: 0; }
.v-appbarber__meta-item .ico { color: var(--text-3); flex: none; }
.v-appbarber__meta-item strong { font-weight: 600; color: var(--text); }
.v-appbarber__conn-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.v-appbarber__sync { white-space: nowrap; }

/* leitura em andamento: barra indeterminada, sem opacidade inicial */
.v-appbarber__loading { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.v-appbarber__loading-bar { position: relative; display: block; height: 4px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.v-appbarber__loading-bar::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  border-radius: inherit; background: var(--green);
  animation: vAppbarberScan 900ms var(--ease) infinite;
}
@keyframes vAppbarberScan { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
.v-appbarber__loading-text { font-size: 13px; color: var(--text-2); }

/* o que chegou nesta leitura */
.v-appbarber__arrivals {
  margin-top: 16px; padding: 14px 16px;
  border: 1px solid var(--green-600); background: var(--green-tint); border-radius: var(--radius-sm);
}
.v-appbarber__arrivals-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.v-appbarber__arrivals-title { font-size: 14px; font-weight: 700; line-height: 1.2; }
.v-appbarber__arrivals-meta { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.v-appbarber__arrivals-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; min-width: 0; }
.v-appbarber__arrival { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v-appbarber__arrival-ico {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: var(--surface-1); color: var(--green-400);
  display: inline-flex; align-items: center; justify-content: center;
}
.v-appbarber__arrival-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v-appbarber__arrival-title { font-size: 14px; font-weight: 600; }
.v-appbarber__arrival-sub { font-size: 12px; color: var(--text-2); }
.v-appbarber__arrival-link { flex: none; white-space: nowrap; }
.v-appbarber__arrivals-empty { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.v-appbarber__arrivals-empty .ico { color: var(--text-3); flex: none; margin-top: 1px; }
.v-appbarber__arrivals-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--green) 22%, transparent); }
.v-appbarber__conn .demo-note { margin-top: 16px; }

/* ---------- 2. o que vem do AppBarber ---------- */
.v-appbarber__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.v-appbarber__stats .kpi { background: var(--surface-2); padding: 14px 16px; gap: 4px; }
.v-appbarber__stats .kpi__value { font-size: 24px; }
.v-appbarber__stats .kpi__hint { line-height: 1.4; }

/* ---------- 3 e 4 lado a lado ---------- */
.v-appbarber__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; min-width: 0; }
.v-appbarber__duo > .card { height: 100%; }
/* os dois cards têm alturas diferentes: a frase de fecho desce para o pé do card em vez de
   deixar um vão morto embaixo dela */
.v-appbarber__split .card__body { display: flex; flex-direction: column; flex: 1 1 auto; }

/* quem cuida do quê */
.v-appbarber__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.v-appbarber__col { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); min-width: 0; }
.v-appbarber__col-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.v-appbarber__col-head .ico { color: var(--text-3); flex: none; }
.v-appbarber__col--horus .v-appbarber__col-head .ico { color: var(--green-400); }
.v-appbarber__col-list { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.v-appbarber__col-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-2); line-height: 1.45; min-width: 0; }
.v-appbarber__col-list .dot { width: 7px; height: 7px; margin-top: 6px; }
.v-appbarber__split-foot { margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* como funciona */
.v-appbarber__steps { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.v-appbarber__step { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.v-appbarber__step-n {
  width: 24px; height: 24px; border-radius: 50%; flex: none; font-style: normal;
  background: var(--green-tint); color: var(--green-400);
  font: 500 12px/1 var(--mono); display: inline-flex; align-items: center; justify-content: center;
}
.v-appbarber__step-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v-appbarber__step-main strong { font-size: 14px; font-weight: 600; }
.v-appbarber__step-main span { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ---------- 5. horários de hoje ---------- */
.v-appbarber__readonly { color: var(--text-3); }
.v-appbarber__readonly .ico { color: var(--text-3); }
.v-appbarber__slots { display: flex; flex-direction: column; min-width: 0; }
.v-appbarber__slot {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center;
  gap: 4px 12px; padding: 11px 0; border-bottom: 1px solid var(--line); min-width: 0;
}
.v-appbarber__slot:first-child { padding-top: 0; }
.v-appbarber__slot:last-child { border-bottom: 0; padding-bottom: 0; }
.v-appbarber__slot-time { font-size: 14px; color: var(--text); }
.v-appbarber__slot-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v-appbarber__slot-name { font-size: 14px; font-weight: 600; }
.v-appbarber__slot-sub { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); min-width: 0; }
.v-appbarber__slot-sub .barber-chip { flex: none; }
.v-appbarber__slot-aside { display: flex; align-items: center; gap: 12px; flex: none; }
.v-appbarber__slot-link { white-space: nowrap; }
.v-appbarber__slot.is-done .v-appbarber__slot-time, .v-appbarber__slot.is-done .v-appbarber__slot-name { color: var(--text-2); }
.v-appbarber__slot.is-missed .v-appbarber__slot-name { text-decoration: line-through; color: var(--text-2); }
.v-appbarber__today-foot { align-items: flex-start; }

/* ---------- 6. consumo do pacote ---------- */
.v-appbarber__price { color: var(--text-2); }
.v-appbarber__qhead { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.v-appbarber__qused { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.v-appbarber__qused strong { font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.v-appbarber__qused span { font-size: 13px; color: var(--text-2); }
.v-appbarber__qleft { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.v-appbarber__qgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; min-width: 0; }
.v-appbarber__qcell { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v-appbarber__qcell-label { font-size: 12px; font-weight: 500; color: var(--text-3); }
.v-appbarber__qcell-value { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.v-appbarber__qcell-hint { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.v-appbarber__note { display: flex; align-items: flex-start; gap: 7px; margin-top: 16px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.v-appbarber__note .ico { color: var(--text-3); flex: none; margin-top: 2px; }
.v-appbarber__quota .demo-note { margin-top: 10px; }

/* ---------- 7. o que a AppBarber pede ---------- */
.v-appbarber__req-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; min-width: 0; }
.v-appbarber__req { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.v-appbarber__req-ico {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: var(--surface-3); color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
}
.v-appbarber__req-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v-appbarber__req-main strong { font-size: 14px; font-weight: 600; }
.v-appbarber__req-main span { font-size: 13px; color: var(--text-3); line-height: 1.5; }

/* ---------- tablet: sidebar recolhida (769 a 1100) ---------- */
@media (max-width: 1100px) and (min-width: 769px) {
  .v-appbarber__qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-appbarber__meta { gap: 8px 16px; }
}

/* ---------- mobile (<= 768) ---------- */
@media (max-width: 768px) {
  .v-appbarber { gap: 12px; }
  .v-appbarber > .page-head { margin-bottom: 4px; }

  .v-appbarber__conn-top { flex-wrap: wrap; gap: 12px; }
  .v-appbarber__ico { width: 38px; height: 38px; border-radius: 10px; }
  .v-appbarber__conn-main { flex: 1 1 200px; }
  .v-appbarber__conn-actions { flex: 1 1 100%; }
  .v-appbarber__sync { width: 100%; }
  .v-appbarber__meta { flex-direction: column; gap: 8px; }

  .v-appbarber__arrivals { padding: 12px 14px; }
  .v-appbarber__arrival { flex-wrap: wrap; }
  .v-appbarber__arrival-main { flex: 1 1 140px; }
  .v-appbarber__arrival-link { min-height: 40px; display: inline-flex; align-items: center; }

  .v-appbarber__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .v-appbarber__stats .kpi { padding: 12px 14px; }
  .v-appbarber__stats .kpi__value { font-size: 22px; }

  .v-appbarber__duo { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .v-appbarber__cols { grid-template-columns: minmax(0, 1fr); }

  .v-appbarber__slot {
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-areas: "time main" "time aside";
    gap: 8px 10px; padding: 12px 0;
  }
  .v-appbarber__slot-time { grid-area: time; align-self: start; }
  .v-appbarber__slot-main { grid-area: main; }
  .v-appbarber__slot-aside { grid-area: aside; justify-self: start; }
  .v-appbarber__slot-sub { flex-wrap: wrap; gap: 4px 8px; }
  .v-appbarber__slot-link { min-height: 40px; display: inline-flex; align-items: center; }

  .v-appbarber__qused strong { font-size: 22px; }
  .v-appbarber__qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }

  .v-appbarber__req-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ---------- movimento zerado quando o sistema pede ---------- */
@media (prefers-reduced-motion: reduce) {
  .v-appbarber__loading-bar::after { animation: none; width: 100%; }
}