/* File: assets/css/components/sfv-prestador-card.css */
/* =========================================================
   SFV » Prestador Card Header (SaaS)
   - Componente compartilhável (Prestador / Cliente / Admin futuro)
   - Skin-aware via tokens
   - Estrutura/layout no componente
   - Decisão visual na skin
   - Escopo principal via .sfv-scope
   - Sem CSS inline
   ========================================================= */

/* =========================================================
   ESCOPO BASE DO COMPONENTE
   ========================================================= */
.sfv-scope .sfv-prest-header{
  --sfv-prest-card-w: 500px;
  --sfv-prest-card-gap: var(--sfv-space-3, 14px);
  --sfv-prest-card-pad-y: var(--sfv-space-3, 14px);
  --sfv-prest-card-pad-x: var(--sfv-space-3, 14px);
  --sfv-prest-card-side-w: 140px;

  --sfv-prest-card-avatar-size: 100px;
  --sfv-prest-card-avatar-border-w: 3px;

  --sfv-prest-card-name-size: 20px;
  --sfv-prest-card-name-weight: 800;
  --sfv-prest-card-name-line: 1.15;

  --sfv-prest-card-meta-size: 13px;
  --sfv-prest-card-label-weight: 800;
  --sfv-prest-card-value-weight: 900;

  --sfv-prest-card-total-size: 20px;
  --sfv-prest-card-total-weight: 1000;
  --sfv-prest-card-turno-size: 13px;
  --sfv-prest-card-turno-weight: 900;

  --sfv-prest-card-name-shadow: 0 6px 14px rgba(0, 0, 0, .35);
  --sfv-prest-card-number-shadow-selected: 0 10px 22px rgba(0, 0, 0, .35);

  --sfv-prest-card-hover-brightness: 1.03;
}

.sfv-scope .sfv-prest-header__inner{
  width: 100%;
  max-width: min(100%, var(--sfv-prest-card-w));
  margin-inline: auto;
  display: grid;
  gap: var(--sfv-prest-card-gap);
}

/* =========================================================
   CARD (desktop)
   ========================================================= */
.sfv-scope .sfv-prest-card{
  display: grid;
  grid-template-columns:
    var(--sfv-prest-card-avatar-size)
    minmax(0, 1fr)
    var(--sfv-prest-card-side-w);
  gap: var(--sfv-prest-card-gap);
  align-items: center;

  min-width: 0;

  background: var(--sfv-prest-card-bg);
  border: var(--sfv-line-w, 1px) solid var(--sfv-prest-card-border);
  border-radius: var(--sfv-prest-card-radius, var(--sfv-r12, 12px));
  box-shadow: var(--sfv-prest-card-shadow);

  padding: var(--sfv-prest-card-pad-y) var(--sfv-prest-card-pad-x);
}

/* =========================================================
   AVATAR
   ========================================================= */
.sfv-scope .sfv-prest-card__avatar{
  width: var(--sfv-prest-card-avatar-size);
  height: var(--sfv-prest-card-avatar-size);
  border-radius: var(--sfv-r999, 999px);
  overflow: hidden;

  border: var(--sfv-prest-card-avatar-border-w) solid var(--sfv-prest-card-avatar-ring);
  box-shadow: var(--sfv-prest-card-avatar-shadow);

  flex: 0 0 auto;
}

.sfv-scope .sfv-prest-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sfv-scope .sfv-prest-card__img--placeholder{
  background: var(--sfv-prest-card-avatar-placeholder);
}

/* =========================================================
   MAIN
   ========================================================= */
.sfv-scope .sfv-prest-card__main{
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  row-gap: var(--sfv-space-1, 6px);
}

.sfv-scope .sfv-prest-card__name{
  font-size: var(--sfv-prest-card-name-size);
  font-weight: var(--sfv-prest-card-name-weight);
  line-height: var(--sfv-prest-card-name-line);
  color: var(--sfv-prest-card-title);
  text-shadow: var(--sfv-prest-card-name-shadow);
  text-align: center;
  margin: 0;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.sfv-scope .sfv-prestador-card__referencia{
  max-width: 100%;
  color: var(--sfv-prest-card-muted);
  font-size: var(--sfv-prest-card-meta-size);
  font-weight: var(--sfv-prest-card-label-weight);
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.sfv-scope .sfv-prestador-card__referencia-dia{
  font-weight: var(--sfv-prest-card-value-weight);
}

.sfv-scope .sfv-prest-card__times{
  display: grid;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  font-size: var(--sfv-prest-card-meta-size);
}

.sfv-scope .sfv-prest-card__time{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  min-width: 0;
}

.sfv-scope .sfv-prest-card__label{
  color: var(--sfv-prest-card-muted);
  font-weight: var(--sfv-prest-card-label-weight);
  white-space: nowrap;
}

.sfv-scope .sfv-prest-card__val{
  color: var(--sfv-prest-card-text);
  font-weight: var(--sfv-prest-card-value-weight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   SIDE
   ========================================================= */
.sfv-scope .sfv-prest-card__side{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: var(--sfv-space-1, 6px);
  text-align: center;

  border-left: var(--sfv-divider-w, 1px) solid var(--sfv-prest-card-divider);
  padding-left: var(--sfv-space-3, 14px);
  min-width: 0;
}

.sfv-scope .sfv-prest-card__status{
  position: static;
  z-index: auto;
}

.sfv-scope .sfv-prest-card__total{
  text-align: center;
}

.sfv-scope .sfv-prest-card__total-num{
  font-size: var(--sfv-prest-card-total-size);
  font-weight: var(--sfv-prest-card-total-weight);
  letter-spacing: .4px;
  color: var(--sfv-prest-card-number);
  line-height: 1;
}

.sfv-scope .sfv-prest-card__turno{
  font-size: var(--sfv-prest-card-turno-size);
  font-weight: var(--sfv-prest-card-turno-weight);
  color: var(--sfv-prest-card-muted);
}

/* =========================================================
   BADGE
   ========================================================= */
.sfv-scope .sfv-badge.sfv-badge--status{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--sfv-badge-padding-y) var(--sfv-badge-padding-x);
  border-radius: var(--sfv-badge-radius);
  font-size: var(--sfv-badge-font-size);
  font-weight: var(--sfv-badge-font-weight);
  letter-spacing: .2px;
  line-height: 1;

  border: var(--sfv-badge-border-w) solid transparent;
  white-space: nowrap;
  box-shadow: var(--sfv-badge-shadow);
}

.sfv-scope .sfv-badge--open{
  background: var(--sfv-color-open);
  color: var(--sfv-color-on-open);
  border-color: var(--sfv-badge-open-border);
}

.sfv-scope .sfv-badge--closed{
  background: var(--sfv-color-closed);
  color: var(--sfv-color-on-closed);
  border-color: var(--sfv-badge-closed-border);
}

/* =========================================================
   RESPONSIVO (mobile)
   ========================================================= */
@media (max-width: 560px){
  .sfv-scope .sfv-prest-header{
    --sfv-prest-card-gap: 10px;
    --sfv-prest-card-pad-y: 14px;
    --sfv-prest-card-pad-x: 12px;
    --sfv-prest-card-avatar-size: 96px;
    --sfv-prest-card-side-w: auto;
    --sfv-prest-card-total-size: 18px;
  }

  .sfv-scope .sfv-prest-header__inner{
    max-width: 100%;
  }

  .sfv-scope .sfv-prest-card{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "avatar side"
      "main main";
    align-items: center;
  }

  .sfv-scope .sfv-prest-card__avatar{
    grid-area: avatar;
    justify-self: center;
    align-self: center;
  }

  .sfv-scope .sfv-prest-card__side{
    grid-area: side;
    border-left: var(--sfv-divider-w, 1px) solid var(--sfv-prest-card-divider-strong);
    padding-left: 12px;
  }

  .sfv-scope .sfv-prest-card__main{
    grid-area: main;
    border-top: var(--sfv-divider-w, 1px) solid var(--sfv-prest-card-divider-strong);
    padding-top: 10px;
  }
}

/* =========================================================
   CLIENTE » LISTA (Tela 1)
   ========================================================= */
.sfv-scope .sfv-prest-header[data-sfv-contexto="cliente"][data-sfv-mode="list"] .sfv-prest-card{
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .06s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    filter .18s ease;
}

.sfv-scope .sfv-prest-header[data-sfv-contexto="cliente"][data-sfv-mode="list"] .sfv-prest-card:hover{
  filter: brightness(var(--sfv-prest-card-hover-brightness));
}

.sfv-scope .sfv-prest-header[data-sfv-contexto="cliente"][data-sfv-mode="list"] .sfv-prest-card:active{
  transform: translateY(1px);
}

/* suporte ao estado atual (.is-selected) e ao futuro estado sfv */
.sfv-scope .sfv-prest-header[data-sfv-contexto="cliente"][data-sfv-mode="list"] .sfv-prest-card.is-selected,
.sfv-scope .sfv-prest-header[data-sfv-contexto="cliente"][data-sfv-mode="list"] .sfv-prest-card.sfv-is-selected{
  border-color: var(--sfv-prest-card-selected-border);
  box-shadow: var(--sfv-prest-card-selected-shadow);
}

.sfv-scope .sfv-prest-header[data-sfv-contexto="cliente"][data-sfv-mode="list"] .sfv-prest-card.is-selected .sfv-prest-card__total-num,
.sfv-scope .sfv-prest-header[data-sfv-contexto="cliente"][data-sfv-mode="list"] .sfv-prest-card.sfv-is-selected .sfv-prest-card__total-num{
  text-shadow: var(--sfv-prest-card-number-shadow-selected);
}