/* =========================================================
   SFV » Reset UI (layout do componente) — CAIXA CENTRAL + 2 CARDS
   ---------------------------------------------------------
   REQUISITOS (do usuário):
   1) Caixa flutuante central ~500px no desktop (responsiva no mobile)
   2) Manter 2 containers internos (Manual e Automático) como CARDS separados
   3) Título "Resetar Fila" deve parecer parte do layout (alinhado/centrado)
   4) Manual: título acima do botão, ambos à esquerda
   5) Automático: título "Reset Automático"; relógio abaixo do título;
      botão salvar à direita do relógio; ambos com mesma largura/altura do Reset
   6) Não mexer em cor dos botões (sfv-buttons.css)

   PADRÃO ATUAL:
   - 100% tokenizado
   - sem tokens legados
   - wrapper nunca vira card pai
   ========================================================= */

#sfv-prestador-app .sfv-prest-reset .sfv-admin-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
}

/* ---------------------------------------------------------
   TÍTULO DO RESET
   --------------------------------------------------------- */
#sfv-prestador-app .sfv-prest-reset__header{
  width: 500px;
  max-width: 100%;
  margin: 0 auto 12px;
}

#sfv-prestador-app .sfv-prest-reset__title{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: var(--sfv-reset-title);
  letter-spacing: .2px;
}

/* ---------------------------------------------------------
   WRAPPER (NÃO É CARD)
   --------------------------------------------------------- */
#sfv-prestador-app .sfv-prest-reset__body{
  width: 500px;
  max-width: 100%;
  margin: 0 auto;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sfv-space-3);
}

/* ---------------------------------------------------------
   CARDS INTERNOS (Manual e Automático)
   --------------------------------------------------------- */
#sfv-prestador-app .sfv-prest-reset__block{
  background: var(--sfv-reset-bg);
  color: var(--sfv-reset-fg);

  border: var(--sfv-line-w, 1px) solid var(--sfv-reset-border);
  border-radius: var(--sfv-r12);
  box-shadow: var(--sfv-reset-shadow);
  padding: var(--sfv-space-4);
}

/* Label / Hint */
#sfv-prestador-app .sfv-prest-reset__label{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 14px;
  color: var(--sfv-reset-title);
}

#sfv-prestador-app .sfv-prest-reset__hint{
  margin-top: 10px;
  color: var(--sfv-reset-muted);
  font-size: 12px;
  line-height: 1.35;
}

/* ---------------------------------------------------------
   MANUAL
   --------------------------------------------------------- */
#sfv-prestador-app #sfv-prestador-reset .sfv-prest-reset__block--manual{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;

  background:
    linear-gradient(0deg, color-mix(in srgb, var(--sfv-color-danger) 5%, transparent), color-mix(in srgb, var(--sfv-color-danger) 5%, transparent)),
    var(--sfv-reset-bg);

  box-shadow:
    var(--sfv-reset-shadow),
    inset 0 0 0 1px color-mix(in srgb, var(--sfv-color-danger) 30%, transparent);
}

#sfv-prestador-app #sfv-prestador-reset #sfv-reset-manual{
  height: 44px;
  width: 220px;
  max-width: 100%;
  justify-content: center;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   AUTO
   --------------------------------------------------------- */
#sfv-prestador-app #sfv-prestador-reset .sfv-prest-reset__block--auto{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Troca de label sem mexer no HTML */
#sfv-prestador-app #sfv-prestador-reset .sfv-prest-reset__block--auto .sfv-prest-reset__label{
  margin: 0;
  position: relative;
  color: transparent;
  line-height: 1;
  height: 16px;
}

#sfv-prestador-app #sfv-prestador-reset .sfv-prest-reset__block--auto .sfv-prest-reset__label::after{
  content: "Reset Automático";
  color: var(--sfv-reset-title);
  font-weight: 900;
  font-size: 14px;
  position: absolute;
  left: 0;
  top: 0;
}

/* Acessibilidade */
#sfv-prestador-app #sfv-prestador-reset .sfv-prest-reset__block--auto label.screen-reader-text{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Linha de controles */
#sfv-prestador-app #sfv-prestador-reset .sfv-prest-reset__block--auto #sfv-reset-time{
  height: 44px;
  width: 220px;
  max-width: 100%;

  border: 1px solid var(--sfv-input-border);
  border-radius: var(--sfv-r12);
  padding: 0 12px;

  background: var(--sfv-input-bg);
  color: var(--sfv-input-fg);
  font-weight: 900;

  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;

  box-shadow: 0 0 0 0 transparent;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

#sfv-prestador-app #sfv-prestador-reset .sfv-prest-reset__block--auto #sfv-reset-time:focus{
  outline: none;
  border-color: var(--sfv-input-focus-border);
  box-shadow: 0 0 0 4px var(--sfv-input-focus-ring);
}

#sfv-prestador-app #sfv-prestador-reset .sfv-prest-reset__block--auto [data-reset-save]{
  height: 44px;
  width: 220px;
  max-width: 100%;
  white-space: nowrap;

  display: inline-flex;
  vertical-align: middle;
}

#sfv-prestador-app #sfv-prestador-reset .sfv-prest-reset__block--auto .sfv-prest-reset__hint{
  margin-top: 6px;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width: 720px){
  #sfv-prestador-app .sfv-prest-reset__header,
  #sfv-prestador-app .sfv-prest-reset__body{
    width: 100%;
  }

  #sfv-prestador-app .sfv-prest-reset__block{
    padding: 14px;
  }

  #sfv-prestador-app #sfv-prestador-reset #sfv-reset-manual{
    width: 100%;
  }

  #sfv-prestador-app #sfv-prestador-reset .sfv-prest-reset__block--auto #sfv-reset-time{
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  #sfv-prestador-app #sfv-prestador-reset .sfv-prest-reset__block--auto [data-reset-save]{
    width: 100%;
  }
}