/* ============================================================
   NAUTICA TURVO - FOCO OPERACIONAL V0.2
============================================================ */


/* Rodízio e fila permanecem no código,
   mas ficam fora da operação atual */

.menu button[data-page="rodizio"],
.menu button[data-page="fila"]{
  display:none;
}


/* ============================================================
   SITUAÇÃO DA FROTA
============================================================ */

.status-board{
  display:grid;
  gap:10px;
}

.status-row{
  display:grid;
  grid-template-columns:135px 45px 1fr;
  gap:10px;
  align-items:center;

  background:var(--card2);

  border:1px solid var(--line);

  border-radius:9px;

  padding:11px 13px;
}

.status-label{
  font-weight:700;
}

.status-count{
  font-size:21px;
  font-weight:800;
}

.status-boats{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.status-row.available{
  border-left:4px solid var(--green);
}

.status-row.ride{
  border-left:4px solid var(--blue);
}

.status-row.maintenance{
  border-left:4px solid var(--yellow);
}

.status-row.blocked{
  border-left:4px solid var(--red);
}

.status-row.stored{
  border-left:4px solid #7796a9;
}

.status-row.undefined{
  border-left:4px solid #546d7d;
}


/* ============================================================
   COMBUSTÍVEL RESUMO
============================================================ */

.overview-fuel-number{
  font-size:38px;
  font-weight:800;
  color:var(--green);
  margin:8px 0 3px;
}

.overview-fuel-percent{
  font-size:18px;
  font-weight:bold;
}


/* ============================================================
   PENDÊNCIAS
============================================================ */

.pending-number{
  font-size:42px;
  font-weight:800;
  margin:7px 0;
}

.pending-warning{
  color:var(--yellow);
}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width:700px){

  .status-row{
    grid-template-columns:1fr auto;
  }

  .status-boats{
    grid-column:1 / -1;
  }

}