/* ========= CONFIGS PAGE THEME ========= */

input[type="text"],
input[type="number"],
input[type="time"],
textarea,
select {
    min-height: 40px;   /* 🔹 altura mínima do campo */
    padding: 0.5rem 0.75rem; /* espaço interno */
}

/* Títulos das seções (laranja e mais respiro) */
.card > h3 {
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.85rem;        /* mais espaço abaixo do título */
  letter-spacing: .2px;
}

/* Subtítulos internos (WIN/LOSS/MG etc) */
.card-sub > h5,
.card > h4 {
  color: #f0f0f0;
  font-weight: 600;
  margin: .25rem 0 .6rem;       /* dá um respiro melhor antes dos campos */
}

/* Labels e espaçamento dos inputs */
.card label {
  display: block;
  font-size: .92rem;
  color: #d8d8d8;
  margin-bottom: .35rem;        /* espaço entre label e input */
}

.chk-inline {
  margin-top: .6rem;
}

/* Cards base (harmoniza com layout.css) */
.card {
  background: #121212;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 1.1rem;
  margin-bottom: 1rem;
}

.card-sub {
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: .85rem;
}

/* Topbar da página de configurações */
.cfg-topbar {
  gap: .65rem !important;
  margin-bottom: 1.1rem !important;
}

/* Grid responsivo com quebras suaves */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: .85rem;                   /* um pouco mais de espaço entre colunas */
}
@media (max-width: 520px) {
  .grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .7rem;
  }
}

/* Campos: hover e focus com borda laranja */
.inpt {
  width: 100%;
  padding: .6rem .7rem;
  border-radius: 10px;
  border: 1px solid #333;
  background: #0f0f0f;
  color: #eee;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.inpt:hover {
  border-color: var(--accent);
}
.inpt:focus,
.inpt:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.308);
}

/* Botões utilitários (ghost, danger, accent) – hovers consistentes */
.btn-ghost {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #333;
  border-radius: 10px;
  padding: .5rem 1rem;
  cursor: pointer;
  transition: border-color .15s ease, transform .08s ease;
}
.btn-ghost:hover { border-color: var(--accent); }
.btn-ghost:active { transform: scale(.98); }

.btn-accent {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 999px;
  padding: .65rem 1.25rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease, transform .08s ease;
}
.btn-accent:hover { filter: brightness(1.05); }
.btn-accent:active { transform: scale(.98); }

.btn-danger {
  background: #3a1414;
  color: #fff;
  border: 1px solid #5a2020;
  border-radius: 10px;
  padding: .5rem 1rem;
  cursor: pointer;
  transition: border-color .15s ease, transform .08s ease;
}
.btn-danger:hover { border-color: #a43d3d; }
.btn-danger:active { transform: scale(.98); }

/* Chips de dias */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: #1a1a1a;
  padding: .4rem .65rem;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
}
.chip input { transform: translateY(1px); }

/* Ativos – somente contorno laranja quando selecionado + hover */
.asset-badge {
  background: #1b1b1b;
  color: #ddd;
  border-radius: 999px;
  padding: .4rem .85rem;
  cursor: pointer;
  font-size: .9rem;
  border: 1px solid #333;
  transition: border-color .15s ease, transform .08s ease;
}
.asset-badge:hover { border-color: var(--accent); }
.asset-badge.is-selected { border: 2px solid var(--accent); }
.asset-badge:active { transform: scale(.98); }

/* Pilhas verticais com espaçamento consistente */
.stack { display: flex; flex-direction: column; gap: .6rem; }

/* Linha de ações das sessões */
.sess-actions {
  gap: .6rem !important;
  margin: .6rem 0 !important;
}

/* Espaço extra entre subtítulo e campos – reforço */
.card > h4 + .grid-auto,
.card-sub > h5 + * {
  margin-top: .4rem;
}

/* Ajuste de margens finas para evitar “aperto visual” */
.card > * + * { margin-top: .55rem; }


.dias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: .5rem;
}

.dias button {
    min-width: 100px;
    padding: .5rem 1rem;
    border: 1px solid #ccc;
    background: var(--dark-sec);
    color: white;
    cursor: pointer;
    transition: 0.3s;
}

.dias button.selected {
    border-color: var(--accent);
}


.ui-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.ui-modal.is-open { display: block; }
.ui-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.ui-modal__dialog {
  position: relative; max-width: 520px; width: calc(100% - 2rem);
  margin: 10vh auto; background: #121212; border: 1px solid #222; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  animation: modalIn .12s ease-out;
}
@keyframes modalIn { from { transform: translateY(8px); opacity:.85 } to { transform: translateY(0); opacity:1 } }

.ui-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1rem; border-bottom: 1px solid #1f1f1f;
}
.ui-modal__header h3 { color: var(--accent); margin: 0; font-weight: 700; }

.ui-modal__close {
  background: transparent; color: #eee; border: 1px solid #333; border-radius: 8px;
  padding: .3rem .6rem; cursor: pointer;
}
.ui-modal__close:hover { border-color: var(--accent); }

.ui-modal__body { padding: 1rem; color: #e9e9e9; }
.ui-modal__body p { margin: 0; line-height: 1.45; }

.ui-modal__footer {
  display: flex; gap: .5rem; justify-content: flex-end;
  padding: .85rem 1rem; border-top: 1px solid #1f1f1f;
}

/* botões do modal (seguem o tema existente) */
.ui-btn { padding: .5rem 1rem; border-radius: 10px; cursor: pointer; border: 1px solid #333; color: #eee; background: #2a2a2a; }
.ui-btn:hover { border-color: var(--accent); }
.ui-btn--accent { background: var(--accent); color: #000; border: none; border-radius: 999px; font-weight: 700; }
.ui-btn--danger { background: #3a1414; color: #fff; border: 1px solid #5a2020; }