/* ============================================================
   PT Lab — Time Boss
   styles.css  (v4.0 — unificado, sem duplicação "Dois")
   ============================================================ */

/* ── Reset mínimo ───────────────────────────────────────────── */
body { margin: 0; padding: 0; color: #fff; }
h2   { text-transform: uppercase; }

input,
button {
  width: 100%;
  padding: 15px;
  border: 1px solid #333;
  box-sizing: border-box;
  border-radius: 15px;
}

label  { padding-bottom: 10px; display: block; }
button { border: none; cursor: pointer; background-color: #4CAF50;
         font-weight: bolder; text-transform: uppercase; color: #fff;
         margin-bottom: 15px; }
button:hover { background-color: #43d848;
               box-shadow: 0 5px 15px rgba(67, 216, 72, .4); }

.resultColor { font-weight: bold; color: #4CAF50; }
.rounded-image { border-radius: 10px; }


/* ── Barra de progresso (se usada) ──────────────────────────── */
#timerProgress { width: 80%; height: 10px; border-radius: 10px;
                 background-color: #ddd; overflow: hidden; margin-bottom: 5px; }
#timerProgress::-webkit-progress-bar   { background-color: #ddd; }
#timerProgress::-webkit-progress-value { background-color: #4CAF50; }
#timerProgress::-moz-progress-bar      { background-color: #4CAF50; }
#timerProgress::-ms-fill               { background-color: #4CAF50; }


/* ── Containers de cálculo (calculator1 e divpai) ───────────── */
.calculator1,
.ptlab-boss-section {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; width: 100%; margin: 0 auto; text-align: center;
}


/* ============================================================
   SERVERS GRID  (parte de cima — horários dos subservidores)
   ============================================================ */
.servers-grid {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
}

.server-column {
  background-color: #121417;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 0;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  font-size: 16px;
}

.server-name {
  font-weight: bold; font-size: 18px; text-align: center;
  margin-bottom: 10px; color: #fff; background-color: #4CAF50;
  width: 100%;
  border-top-left-radius: 10px; border-top-right-radius: 10px;
}

.subservers-container {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 100%; align-items: flex-start; padding: 0;
}

.subservidor {
  padding: 0 3px; background-color: #2a2a2a;
  border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  min-width: 120px;
}
.subservers-container .subservidor:last-child { margin-bottom: 10px; }

.subservidor-linha { font-size: 13px; color: #fff; margin: 0; padding: 0; }
.subservidor-time  { color: #4CAF50; font-weight: bold; font-size: 16px; }

/* Alertas de proximidade */
.subservidor.alerta-verde {
  box-shadow: 0 0 4px 2px rgba(67, 156, 71, 0.4);
  background-color: rgba(67, 156, 71, 0.1); border-radius: 10px;
}
.subservidor.alerta-amarelo {
  box-shadow: 0 0 4px 2px rgba(196, 147, 0, 0.5);
  background-color: rgba(196, 147, 0, 0.1); border-radius: 10px;
}
.subservidor.alerta-vermelho {
  box-shadow: 0 0 6px 3px rgba(131, 47, 40, 0.6);
  background-color: rgba(131, 47, 40, 0.1); border-radius: 10px;
}


/* ── Botão de alerta sonoro ─────────────────────────────────── */
.sound-toggle {
  margin-top: auto; padding: 6px 10px;
  background-color: #2A2A2A; color: #fff; border: none;
  border-radius: 9px; font-size: 12px; cursor: pointer;
  transition: 0.3s ease; align-self: stretch; line-height: 1;
}
button.sound-toggle { margin-bottom: 0; }
.sound-toggle[data-active="false"] { opacity: 0.5; background-color: #555; }


/* ── Tooltip "aconfirmar" ───────────────────────────────────── */
.tooltip {
  position: relative; cursor: help;
  border-bottom: 1px dotted #444; border-radius: 100%;
  background-color: #43D848; color: #fff;
}
span.tooltip { width: 20px; padding-right: 7px; padding-left: 7px; }
.tooltip:hover::after {
  content: attr(data-tooltip); position: absolute;
  bottom: 100%; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.75); color: #fff;
  padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  font-size: 0.85em; pointer-events: none; z-index: 10;
  opacity: 1; transition: opacity 0.15s ease-in-out;
}


/* ============================================================
   LISTA DE BOSSES  (seção "por horário" — unificada)
   ============================================================ */

/* Seletor de hora */
.ptlab-hora-grid {
  display: flex; max-width: 980px; flex-wrap: wrap;
  justify-content: center; gap: 5px; margin-bottom: 10px;
  align-items: flex-end;
}

/* Wrapper que agrupa badge + botão */
.ptlab-hora-wrapper {
  display: flex; flex-direction: column; align-items: center;
}

/* Badge "EVENTO" acima do botão */
.ptlab-hora-evento {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #fff;
    background-color: #4CAF50;
    padding: 1px 5px;
    border-radius: 6px;
    margin-bottom: -7px;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    z-index: 1;
}

.ptlab-hora-item {
    cursor: pointer;
    margin-bottom: 0;
    padding: 1px 9px;
    border: 1px solid #555;
    border-radius: 11px;
    font-size: 14px;
}

.ptlab-hora-item:hover { background-color: #f0f0f0; color: #000 !important; }
.ptlab-hora-active { background-color: #4CAF50; color: #fff; }

/* Grid dos cards de boss */
.ptlab-boss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
  width: 100%;
  max-width: 980px;
  margin-top: 8px;
  align-items: stretch;
}
.ptlab-boss-grid:has(> .ptlab-boss-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 260px));
  justify-content: center;
}

/* Card individual do boss */
.ptlab-boss-card {
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-width: 0;
  justify-self: center;
  overflow: hidden;
  border: 1px solid #344239;
  border-radius: 12px;
  background: #121417;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  transition: border-color .18s ease;
}
.ptlab-boss-card:hover,
.ptlab-boss-card:focus-within { border-color: #68b66b; }
.ptlab-boss-card-header {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
  height: 40px;
  padding: 3px 10px;
  background: #2A2A2A;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.ptlab-boss-card-name {
  min-width: 0;
  width: 100%;
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}
.ptlab-boss-card-name.is-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
}
.ptlab-boss-card-level {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 3px 6px;
  border: 1px solid #34463a;
  border-radius: 5px;
  background: #18221d;
  color: #d9edda;
  font-size: 11px;
  white-space: nowrap;
}
.ptlab-boss-card-event {
  position: absolute;
  bottom: 9px;
  right: 9px;
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #204e25;
  color: #e7f7c6;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.ptlab-boss-card-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  padding: 12px 22px;
  box-sizing: border-box;
  background: #121417;
}
.ptlab-boss-card-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35));
}
.ptlab-boss-card .ptlab-boss-map-toggle {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 3px;
  border: 1px solid #45584a;
  border-radius: 10px;
  background: #18221d;
  box-shadow: none;
}
.ptlab-boss-map-toggle img { width: 26px; height: 26px; }
.ptlab-boss-card .ptlab-boss-map-toggle:hover,
.ptlab-boss-card .ptlab-boss-map-toggle.is-open { background: #2b4a32; border-color: #79c87d; }
.ptlab-boss-map-toggle:focus-visible { outline: 2px solid #a4e8a7; outline-offset: 2px; }
.ptlab-boss-map-preview {
  position: absolute;
  inset: 7px;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid #45584a;
  border-radius: 8px;
  background: #080e0b;
  pointer-events: none;
}
.ptlab-boss-map-preview[hidden] { display: none; }
.ptlab-boss-map-preview img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.ptlab-boss-card-details {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid #28372e;
}
.ptlab-boss-card .ptlab-boss-card-servers {
  margin: 0;
  padding: 6px 8px;
  border-left: 2px solid #78c77b;
  border-radius: 0 4px 4px 0;
  background: #203225;
  color: #c9e7cc;
  font-size: 12px;
  line-height: 1.4;
}
.ptlab-boss-card-label {
  display: block;
  margin-bottom: 5px;
  color: #a6b6ac;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Mapa(s) do boss */
.ptlab-boss-card-map {
  color: #edf3ee;
  font-size: 13px;
  line-height: 1.45;
}
.ptlab-boss-card-map-name { display: block; overflow-wrap: anywhere; }
.ptlab-boss-card-map-list { line-height: 20px; }
.ptlab-boss-card-map-list.is-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  max-height: 120px;
  overflow: hidden;
}
.ptlab-boss-card .ptlab-boss-map-more {
  width: auto;
  margin: 7px 0 0;
  padding: 3px 0;
  border: 0;
  border-radius: 2px;
  background: none;
  box-shadow: none;
  color: #9cdda0;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}
.ptlab-boss-map-more[hidden] { display: none; }
.ptlab-boss-card .ptlab-boss-map-more:hover { color: #fff; text-decoration: underline; }
.ptlab-boss-map-more:focus-visible { outline: 2px solid #a4e8a7; outline-offset: 3px; }

/* Horários (times) do boss */
.ptlab-boss-card-times { margin-top: auto; }
.ptlab-boss-card-hours { display: flex; flex-wrap: wrap; gap: 5px; }
.ptlab-boss-card-hour {
  padding: 3px 6px;
  border: 1px solid #34463a;
  border-radius: 5px;
  background: #2A2A2A;
  color: #c1d6c5;
  font-size: 12px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.ptlab-boss-card-hour.is-selected {
  border-color: #79c87d;
  background: #3c8642;
  color: #fff;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .ptlab-boss-card { transition: none; }
}

/* Dica "coloque o mouse sobre o ícone…" */
.ptlab-map-hint {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 4px;
  margin: 4px 0 5px; font-size: 13px; justify-content: center;
  color: #b8c6be;
}
.ptlab-map-hint img { margin: 0 5px; max-width: 100px; height: auto; }
.ptlab-map-hint p   { padding: 0; margin: 0; }

/* Subtítulo */
.ptlab-boss-subtitle {
  font-size: 16px; font-weight: 400;
  padding-bottom: 10px; padding-top: 5px;
}

/* Info-mapa do calculator2 oculto (mantido para compatibilidade) */
.info-mapa     { display: flex; align-items: center; margin-bottom: 5px; font-size: 14px; }
.info-mapa img { margin: 0 5px; max-width: 100px; height: auto; }
.info-mapa p   { margin: 0; }


/* ============================================================
   RESPONSIVO
   ============================================================ */
@media screen and (max-width: 580px) {
  .ptlab-boss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ptlab-boss-card { max-width: none; }
  .ptlab-boss-card-header { padding: 3px 10px; }
  .ptlab-boss-card-name { font-size: 14px; }
  .ptlab-boss-card-visual { height: 160px; padding: 12px; }
  .ptlab-boss-card-details { padding: 10px; }
  .ptlab-boss-card .ptlab-boss-map-toggle { width: 40px; height: 40px; }
  .subservidor { min-width: 100px; margin-bottom: 0; }
  .servers-container,
  .subservers-container,
  .subservidor {
    display: flex; flex-wrap: wrap; justify-content: space-between;
  }
  .subservidor-name {
    background-color: rgba(0, 0, 0, 0.1);
    margin-top: 0; padding: 0 5px; margin-bottom: 0;
  }

  .ptlab-hora-item { margin-bottom: 1px; }

  .calculator1,
  .ptlab-boss-section { width: 100% !important; }

  .hora-brasil { font-size: 14px; }
  .aviso       { font-size: 12px; }
  .tooltip button { margin-top: 5px; }
  .servers-container button { margin-bottom: -2px; padding: 6px; }
}

@media screen and (max-width: 330px) {
  .ptlab-boss-grid,
  .ptlab-boss-grid:has(> .ptlab-boss-card:nth-child(2):last-child) { grid-template-columns: 1fr; }
  .calculator1,
  .ptlab-boss-section { width: 100% !important; }
}